HTML DOM style属性操作
程序员文章站
2022-07-04 20:06:18
...
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";