为了达到某种特殊的效果我们需要用 Javascript 动态的去更改某一个标签的 CSS 属性,如何动态修改 css 样式呢?面对这个问题,小编带领大家来解决 javascript 动态修改 css 样式,小伙伴们都快来学习吧
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
在很多情况下,都需要对网页上元素的样式进行动态的修改。在 JavaScript 中提供几种方式动态的修改样式,下面将介绍方法的使用、效果、以及缺陷。
1、使用 obj.className 来修改样式表的类名。
2、使用 obj.style.cssTest 来修改嵌入式的 css。
3、使用 obj.className 来修改样式表的类名。
4、使用更改外联的 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: 10px 25px;
- 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.className 来修改样式表的类名
从下面的代码可以看出 ob.style.cssTest 是如何来 btnB 的样式的。
- function changeStyle1() {
- var obj = document.getElementById("btnB");
- obj.style.backgroundColor= "black";
- }
该段代码修改 btB 的文字的颜色,在浏览器中打开调试工具,可以发现 btB 标签中多了一个属性【style="内联式 > 外联式。而 btB 的 hove 伪类的 background-color 样式写在内联式中,所以嵌入式的 background-color 覆盖了伪类中,这就使得鼠标放入 btB 上感觉不到背景颜色的变化。
方法二、使用 obj.style.cssTest 来修改嵌入式的 css
直接上 JavaScript 代码:
- function changeStyle2() {
- var obj = document.getElementById("btnB");
- obj.style.cssText = "background-color:black; display:block;color:White;
- }
该段代码和【一】中的效果是一样的,缺陷也是一样。
方法三、使用 obj.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");
- }
这样也能方便的更改 btB 的样式,个人觉得这种方式是最好用的,是实现整体页面换肤的最佳方案。
来源: http://www.phperz.com/article/17/0224/269663.html