我正在嘗試學習 Javascript 并將其集成到網頁中，但是當嘗試使用 JavaScript 隨機函式來改變點擊時行的大小時沒有任何反應？
function randomnumber(min, max) {
var rn = Math.random() * (max - min) min;
document.getElementById("rain").style.width = rn;
}body {
background:#000000;
}
.line {
height: 1px;
width: 40px;
background: white;
transform: rotate(45deg);
}<div id="rain" onclick="randomnumber(1px,100px)">
<div class="size">
<div class="line"></div>
</div>
</div>uj5u.com熱心網友回復：
您不能將 css 值用作 javascript 函式的引數，100px例如 1rem.
在 'rain' div 中使用以下代碼：
//...
<div id="rain" onclick="randomnumber(1, 100)">
//...
</div>
//...
uj5u.com熱心網友回復：
- 函式中的引數必須是整數才能對其應用算術。
- 如果要設定寬度，則必須添加單位，例如
px. - 在您的 CSS 中，您正在設定具有 class 的元素的寬度
line，但在您的 JS 中，您正在更改具有 class 的元素的值rain- 要更改您在 css 中設定的寬度，您可以使用querySelector下面提供的。
function randomnumber(min, max) {
var rn = Math.random() * (max - min) min;
document.querySelector('#rain .line').style.width = rn 'px';
}body {
background:#000000;
margin: 100px;
}
.line {
height: 5px;
width: 50px;
background: white;
transform: rotate(45deg);
}<div id="rain" onclick="randomnumber(1,100)">
<div class="size">
<div class="line">
</div>
</div>
</div>uj5u.com熱心網友回復：
問題是您認為1pxand100px是數字，但1pxand的型別100px是字串。此外，你不能使用1pxand 100px 來做數學。
此外，使您的代碼無法作業的另一個問題是您正在嘗試將寬度分配給line(the rain) 的父元素，并且由于 rain 沒有任何樣式，因此它也無法正常作業。您應該直接將樣式應用于line
function randomnumber(min, max) {
var rn = Math.random() * (max - min) min;
document.querySelector(".line").style.width = rn 'px';
}body {
background:#000000;
}
.line {
height: 1px;
width: 40px;
background: white;
transform: rotate(45deg);
}<div id=rain onclick="randomnumber('1','100')" >
<div class="size">
<div class="line">
</div>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/405301.html
標籤：