如何用JS给div添加样式

html-css015

如何用JS给div添加样式,第1张

用JS给div添加样式是通过js操作css来实现的。

用js方法找到div的dom对象

通过js操作css的style属性来改变div的样式

具体举例如下:

定义div:<div id="myDiv" style="color:red">改变样式测试</div>

编写js代码:

var color = document.getElementById("myDiv").style.color

if (color == "red")

 document.getElementById("myDiv").style.color="black"

else

 document.getElementById("myDiv").style.color="red"

执行js代码后,div原来是红色会变成黑色,原来是别的颜色会变成红色

可以的. 可以这样: document.getElementById("id").style.height = 100px

.style.后面可以跟css的属性名, 如宽高, 背景颜色等等, 具体你可以去尝试一下. 当原来已有此属性时,再用js设置就会把原有的属性覆盖.

例如改变背景色:

<div id="changeColor">使用JS改变背景色</div>

<script>

var cc = document.getElementById("changeColor")

cc.style.backgoundColor="#000" //将背景色改为黑色

cc.style.fontSize="20px" // 将文字大小改为20px,等号右边也可以写为20+"px"

cc.style.color="#fff" //将文字颜色改为白色

</script>

以此类推即可