HTML DOM style属性操作

最新推荐文章于 2022-07-20 20:17:57 发布

Jay·Yuen

最新推荐文章于 2022-07-20 20:17:57 发布

阅读量3.7k

点赞数 2

本文链接：https://blog.csdn.net/Yuanriver/article/details/100925945

版权

HTML DOM 专栏收录该内容

5 篇文章 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";