怎样在JS中改变Html的宽⾼属性怎样改变宽⾼?⾸先在JacaScript中改变Html的样式属性,先要写⼀个div.style.(style样式属性)
例:div.style.backgroundColor 注意:backgroundColor 中的C要⼤写,不然运⾏会出错。
现在说⼀下怎样改变宽⾼属性。
改变宽:div1.style.width=w+"px";
改变⾼:div1.style.height=h+"px";
注:w和h是⾃⼰随便定义的变量值。
应⽤案例:写⼀个可以随便改变宽⾼⼤⼩、背景颜⾊的div块
简单说明:点击按钮就可以改变上⽅div块的宽⾼⼤⼩和背景颜⾊。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>
<style>
#div1{
width: 100px;
height: 100px;
border: 1px solid black;
margin: 50px auto;
}
#bt{
text-align: center;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="bt"><input type="button" value="请点击..."></div>
htmlbutton属性<script>
var ElementById("bt");
text();
};
function text(){
var col="#";
for(i=0;i<6;i++){
col+=parseInt(Math.random()*16).toString(16);
}
div1.style.backgroundColor=col;
var w="";
var h="";
for(i=0;i<3;i++){
w+=parseInt(Math.random()*9);
}
for(j=0;j<3;j++){
h+=parseInt(Math.random()*9);
}
div1.style.width=w+"px";
div1.style.height=h+"px";
};
</script>
</body>
</html>
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论