小编给大家分享一下JS怎么设置元素样式的,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
一看到这个标题,大家可能首先想到的就是使用”(元素].style。(CSS属性名]=[属性值]“这样的套路去设置元素样式,但实际上,我们其实还有其他方式可以选择。
接下来,我将详细介绍三种设置元素样式的方式。
<强>一、风格
这个其实就是我们所熟知的方式,举个例子~ ~
显示效果:
这种方式看似简单粗暴,但写法过于繁冗,尤其是在需要添加很多样式时尤为突出,并且需要注意的是,对于使用短划线的CSS属性名,必须将其转换成驼峰大小写形式。(如示例中的写成backgroundColor)
<强>二,style.cssText
这种方式相对于上面方法更为简洁,更像是直接在元素上写CSS:
<代码>[元素].style。cssText=[CSS样式];
例如:
确实,写法上很方便。
但是,缺点是后面同样通过这种方式添加的样式会覆盖之前通过风格特性指定的样式。
同样还是上面的例子,只不过是将两段js写在一块:
如果按照层叠样式表的特性,上面定义的红色的背景颜色应该还存在,然而实际上、下面通过style.cssText方式定义的样式会将风格(包括风格。cssText)方式添加的样式全部重写。所以,这个例子最终表现结果与上面只有一句时的效果是一样的:
最后注意下兼容性,IE8及更早版本均不支持cssText。
<强>三,insertRule()
这个用法相对上面两种方法都较为复杂一些:
<代码>(表).insertRule ([CSS样式),指定位置)
(表)表示某个样式表,它可以通过document.styleSheets来获得。那么,文档。样式表又是什么呢?说得简单一点就是应用在文档中的所有样式表,包括通过链接标签引入的样式和风格标签定义的样式。如果理解上还是有点困难,那么我们还是放个实例吧~ ~
首先头部引入样式表:
当然,这个样式表得真实存在,就算里面什么样式都不写也没关系。也可以直接用风格标签,内容为空也不要紧。
然后用JS获取这个样式表:
最后我们就可以给这个样式表中添加样式了:
如果是在上面所有例子的基础上添加的这段代码,那么显示结果会是这样的:
大小还是200 * 200大小,背景颜色是绿色,说明通过style.cssText所设置的宽高样式把通过insertRule()设置的样式覆盖了,原因很简单,风格(包括style.cssText)方式设置的样式属于行内样式,自然要比通过insertRule()设置的样式优先级更高咯~ ~
那么,示例当中insertRule()的第二个参数0又是指的什么呢?
它指的是我们需要添加css代码的位置,所以参数0就代表的是该样式表的最开始位置。
例如,我们先给样式表中手动添加一段样式(以下例子与上述例子无关):
