47.dom操作样式属性

<head>
    <meta charset="UTF-8">
    <title>5.dom操作样式属性</title>
</head>
<body>
        <div id="no1">
            测试样式效果
        </div>
        <hr>
        <div id="btn">
            <input type="button" value="添加背景色">
            <input type="button" value="添加边框">
            <input type="button" value="添加宽高">
            <input type="button" value="显示样式">
        </div>
        <hr>
        <div id="show"></div>
</body>
        <script>
            /*添加背景色*/
            document.getElementById("btn").getElementsByTagName("input")[0].onclick=function () {

                document.getElementById("no1").style.backgroundColor = "red";
            }
            /*添加边框*/
            document.getElementById("btn").getElementsByTagName("input")[1].onclick=function () {

                document.getElementById("no1").style.border="solid 1px blue";
            }
            /*添加宽高*/
            document.getElementById("btn").getElementsByTagName("input")[2].onclick=function () {

                document.getElementById("no1").style.width="120px";
                document.getElementById("no1").style.height="50px";

            }
            /*显示样式*/
            document.getElementById("btn").getElementsByTagName("input")[3].onclick=function () {
                //只能拿到行内样式效果

                //document.getElementById("no1").style;
                document.getElementById("show").innerHTML=
                    document.getElementById("no1").style.backgroundColor+"|"+
                    document.getElementById("no1").style.border+"|"+
                    document.getElementById("no1").style.width+"|"+
                    document.getElementById("no1").style.height
            }
        </script>
posted on 2022-04-12 23:33 小小程序猿level1 阅读(32) 评论(0) 收藏举报