在很多情况下, 都需要对网页上元素的样式进行动态的修改. 在 JavaScript 中提供几种方式动态的修改样式, 下面将介绍方法的使用, 效果, 以及缺陷.
JavaScript 修改 CSS 样式的几种方法:
1, 使用 obj.className 来修改样式表的类名.
2, 使用 obj.style.cssTest 来修改嵌入式的 CSS.
3, 使用更改外联的 CSS 文件, 从而改变元素的 CSS
示例:
下面是一段 html 代码和 CSS 代码用来解释上面方法的区别的.
- CSS
- .style1 {
- margin: 10px auto;
- background - color: #9999FF;
- display: block;
- color: White;
- border: 1px solid white;
- padding: 10px 25px;
- font - size: 18px;
- }
- .style1: hover {
- background - color: #66B3FF;
- cursor: pointer;
- }
- .style2 {
- margin: 10px auto;
- background - color: gray;
- display: block;
- color: black;
- border: 1px solid white;
- padding: 10px25px;
- font - size: 18px;
- }
- .style2: hover {
- background - color: black;
- color: White;
- cursor: pointer
- }
HTML 代码:
- <div>
- <input id="btnB" type="button" name="btnLogin" value="登录" class="style1" />
- <div id="tool">
- <input type="button" value="[obj.style.className] 更改样式" onclick="changeBackgroundColor()" />
- <input type="button" value="[obj.style.cssText] 更改样式" onclick="changeFontSize()" />
- <input type="button" value="[obj.className] 更改样式" onclick="addRadius()" />
- <input type="button" value="更改外联 css 样式" onclick="recover()" /></div>
- </div>
方法一, 使用 obj.style.cssTest 来修改嵌入式的 CSS
- function changeStyle2() {
- var obj = document.getElementById("btnB");
- obj.style.cssText = " display:block;color:White;
- }
方法二, 使用 bj.className 来修改样式表的类名
使用代码来修改 btB 引用样式的类名, 如下段代码:
- function changeStyle3() {
- var obj = document.getElementById("btnB");
- //obj.className = "style2";
- obj.setAttribute("class", "style2");
- }
通过更改 btB 的 CSS 的类名的方式来更改样式, 更改样式类名有两种方式. 1,obj.className = "style2"; 2, obj.setAttribute("class", "style2"); 都是一样的效果.
用这种方式来修改 CSS 比上面的效果要好很多.
方法三, 使用更改外联的 CSS 文件, 从而改变元素的 CSS
通过更改外联的 CSS 文件引用从而来更改 btB 的样式, 操作很简单. 代码如下:
首先得引用外联的 CSS 文件, 代码如下:
- <link href="css1.css" rel="stylesheet" type="text/css" id="css"/>
- function changeStyle4() {
- var obj = document.getElementById("css");
- obj.setAttribute("href","css2.css");
- }
来源: http://www.css88.com/qa/css3/12704.html