基於計算的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的大小

回答

相關問題