JavaScript HTML... 登录

JavaScript HTML DOM - 改变CSS

JavaScript修改CSS有4种方法:

修改节点style(内联样式);

改变节点class或id;

写入新的css;

替换页面中的样式表。

不建议使用后两种方法,几乎所有的功能都可以通过前两种方式实现,并且代码更加清晰、易理解。

修改节点style(内联样式)

这种方法权重是最高的,直接写在节点的style属性上,他会覆盖其他方法设置的样式。使用方法很简单:

var element = document.getElementById("test");

element.style.display = "none" //让元素隐藏

但是要注意的是,有些CSS样式名称是由几个单词组成的例如font-size、background-image等,他们都是用破折号(-)连接起来的,然而JavaScript中破折号表示“减”,因此不能作为属性名称。我们需要使用“驼峰格式(camelCase)”来书写属性名,例如fontSize、backgroundImage。

还要注意的是,很多style都是有单位的,不能只给一个数字。例如fontSize的单位有px、em、%(百分比)等。

更改class、id

id和class是设置样式的“钩子”,更改之后浏览器会自动更新元素的样式。

更改id的方法和class的类似,但是个人并不建议这样使用,因为id是用于定位元素的,最好不要用它来定义元素的显示样式,并且id也常作为JavaScript的钩子,可能会引起不必要的错误。

在JavaScript中,class是一个保留关键字,因此使用className作为访问元素class的属性,例如:

.redColor{

color: red;

}

.yellowBack{

background: yellow;

}

element.className = "redColor";//设置class

element.className += " yellowBack";//增加class


改变 HTML 元素的样式,一般请使用这个语法:

document.getElementById(id).style.property=新样式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
  <h1 id="id1">标题</h1>
  <button type="button" onclick="document.getElementById('id1').style.color='blue'">点击改变</button>
</body>
</html>


下一节
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script type="text/javascript"> function setSize() { document.getElementById("t2").style.fontSize = "30px"; } function setColor() { document.getElementById("t2").style.color = "red"; } function setbgColor() { document.getElementById("t2").style.backgroundColor = "blue"; } function setBd() { document.getElementById("t2").style.border = "3px solid #FA8072"; } </script> </head> <body> <div id="t2">欢迎光临!</div> <p><button onclick="setSize()">大小</button> <button onclick="setColor()">颜色</button> <button onclick="setbgColor()">背景</button> <button onclick="setBd()">边框</button> </p> </body> </html>
提交 重置代码
章节 评论 笔记 课件
  • 取消 回复 发送
  • 取消 发布笔记 发送