使用JavaScript动态更改CSS样式 | 您所在的位置:网站首页 › js改变伪类样式 › 使用JavaScript动态更改CSS样式 |
在很多情况下,都需要对网页上元素的样式进行动态的修改。在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 一、使用obj.className来修改样式表的类名 从下面的代码可以看出ob.style.cssTest是如何来btnB的样式的。 function changeStyle1() { var obj = document.getElementById("btnB"); obj.style.backgroundColor= "black"; } 该段代码修改btB的文字的颜色,在浏览器中打开调试工具,可以发现btB标签中多了一个属性【style="background-color:black"】,从而改变btB的样式。 缺陷:在修改btB的背景色之后用鼠标放到btB上可以发现,btB的伪类hover里面的css根本不起作用。原来是当你修改了这个这样样式之后。在btB的内联样式中多了background-color属性了,在css的应用中也是有级别的,嵌入式>内联式>外联式。而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文件,代码如下: function changeStyle4() { var obj = document.getElementById("css"); obj.setAttribute("href","css2.css"); } 这样也能方便的更改btB的样式,个人觉得这种方式是最好用的。是实现整体页面换肤的最佳方案。 今天听了一天的讲座,听得有点怀疑自己了,玄乎其玄的。还好晚上师兄来了,给我拨点迷津,让我又恢复了以往的坚定。 听演讲还是有点收获的,本次的收获有两点。 第一:开阔了我的见识,引起我的反思。 第二:给我又一次的打鸡血,鞭笞我不断的努力努力。 不要责怪自己的意志不坚定,因为我也是一个合和物。 |
CopyRight 2018-2019 实验室设备网 版权所有 |