基于计算的RNG动态调整Div/Element的大小

因此，我试图创建一个脚本，允许我点击页面上的按钮，然后链接到它的JS功能将生成一个1-1000之间的随机数并成为设置为div的尺寸。 Chrome检查器显示属性更改正在发生，但页面上的内容本身不会更改。基于计算的RNG动态调整Div/Element的大小

<button onclick="myFunction()">Try it</button> 
<div id="block" style="background-color:blue;"> 
</div> 
function myFunction() { 
    document.getElementById("block").setAttribute("width", Math.floor(Math.random() * 1001) + "px"); 
document.getElementById("block").setAttribute("height", Math.floor(Math.random() * 1001) + "px"); 
}

的jsfiddle：http://jsfiddle.net/NR2k6/118/

来源

2016-07-29 Paul McGlinchey

你为什么不使用'element.style.width'，而不是' setAttribute'？ –

只有少量的HTML元素使用宽度和高度属性进行大小调整，例如。 'img'＆'canvas'。你应该通过设置'style'属性而不是'divs'使用css – Rob

你想设置元素的style，而不是属性：

var d = document.getElementById("block"); 
d.style.width = Math.floor(Math.random() * 1001) + "px" ; 
d.style.height= Math.floor(Math.random() * 1001) + "px" ;

来源

2016-07-29 21:37:14 Malk

谢谢！我正在尝试使用.style，但它不起作用，也许我错误地输入了代码。尽管如此，谢谢。我现在要点击这个按钮可以得到好几个小时的乐趣 –

@PaulMcGlinchey这是正确的答案，我已经更新了你的小提琴作为一个工作的例子。 http://jsfiddle.net/NR2k6/119/ – Rob

基于计算的RNG动态调整Div/Element的大小

回答

相关问题