怎样在JS中改变Html的宽高属性怎样改变宽高？

最新推荐文章于 2024-06-18 16:11:06 发布

畅一凡

最新推荐文章于 2024-06-18 16:11:06 发布

阅读量1.1k

点赞数

文章标签： css css3 javascript html5

本文链接：https://blog.csdn.net/ProgrammingWhite/article/details/105058743

版权

首先在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>
    <script>
        var bt=document.getElementById("bt");
        bt.onclick=function(){
                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>

畅一凡

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
怎样在JS中改变Html的宽高属性怎样改变宽高？

首先在JacaScript中改变Html的样式属性，先要写一个div.style.(style样式属性)例：div.style.backgroundColor 注意：backgroundColor 中的C要大写，不然运行会出错。现在说一下怎样改变宽高属性。改变宽：div1.style.width=w+"px";改变高：div1.style.height=h+"...
复制链接

扫一扫