HTML DOM style属性操作-蒲公英云

HTML DOM style属性操作

た入场券 2024-04-19 10:47 203阅读 0赞

dom.style.property:通过元素的style属性间接操作css样式

一，修改颜色

title.style.color：修改节点的颜色

<body>
    <h1 id="title">修改颜色</h1>
</body>
<script>
    let title = document.getElementById("title");
    title.style.color = "#333fff";
</script>

二，修改背景颜色

style.background：修改背景颜色

<body>
    <h1 id="title">修改背景颜色</h1>
</body>
<script>
    let title = document.getElementById("title");
    title.style.background = "#333999";
</script>

三，修改节点大小

style.width：修改节点宽度

<body>
    <div id="box" style="margin: auto;width: 100px;height: 100px;background: turquoise"></div>
</body>
<script>
    let box = document.getElementById("box");
    box.style.width = "200px";
</script>

四，修改节点的位置

style.marginTop：设置节点位置

<body>
    <div id="box" style="margin: auto;width: 100px;height: 100px;background: turquoise"></div>
</body>
<script>
    let box = document.getElementById("box");
    box.style.marginTop = "300px";
</script>

五，几何形状

（1），正方形

let box = document.getElementById("box");
    box.style.width = "300px";
    box.style.height = "300px";
    box.style.background = "turquoise";

（2），长方形

let box = document.getElementById("box");
    box.style.width = "300px";
    box.style.height = "100px";
    box.style.background = "turquoise";

（3），圆形

let box = document.getElementById("box");
    box.style.width = "300px";
    box.style.height = "300px";
    box.style.background = "turquoise";
    box.style.borderRadius = "150px";