JS如何设置元素样式的方法示例

前端之家收集整理的这篇文章主要介绍了JS如何设置元素样式的方法示例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

一看到这个标题,大家可能首先想到的就是使用“[元素].style.[CSS属性名] = [属性值]”这样的套路去设置元素样式,但实际上,我们其实还有其他方式可以选择。

接下来,我将详细介绍三种设置元素样式的方式。

一、style

这个其实就是我们所熟知的方式,举个例子~~

Box">
Box = document.getElementById("Box"); Box.style.width = '100px'; Box.style.height = '100px'; Box.style.backgroundColor = "#f00";

显示效果

这种方式看似简单粗暴,但写法过于繁冗,尤其是在需要添加很多样式时尤为突出。并且需要注意的是,对于使用短划线的CSS属性名,必须将其转换成驼峰大小写形式。(如示例中的backgroundColor)

二、style.cssText

这种方式相对于上面方法更为简洁,更像是直接在元素上写CSS:

[元素].style.cssText = [CSS样式];

例如:

Box.style.cssText = 'width: 200px; height: 200px; border: 1px solid #f00;';

确实,写法上很方便。

但是,缺点是后面同样通过这种方式添加的样式会覆盖之前通过style特性指定的样式。

同样还是上面的例子,只不过是将两段JS写在一块:

Box = document.getElementById("Box"); Box.style.width = '100px'; Box.style.height = '100px'; Box.style.backgroundColor = "#f00"; Box.style.cssText = 'width: 200px; height: 200px; border: 1px solid #f00;';

如果按照层叠样式表的特性,上面定义的红色的背景颜色应该还存在,然而实际上,下面通过style.cssText方式定义的样式会将style(包括style.cssText)方式添加的样式全部重写。所以,这个例子最终表现结果与上面只有一句时的效果是一样的:

最后注意下兼容性,IE8及更早版本均不支持cssText。

三、insertRule()

这个用法相对上面两种方法都较为复杂一些:

[sheet].insertRule([CSS样式],指定位置)

[sheet]表示某个样式表,它可以通过document.styleSheets来获得。那么,document.styleSheets又是什么呢? 说得简单一点就是应用在文档中的所有样式表,包括通过link标签引入的样式和style标签定义的样式。如果理解上还是有点困难,那么我们还是放个实例吧~~

首先头部引入样式表:

当然,这个样式表得真实存在,就算里面什么样式都不写也没关系。也可以直接用style标签内容为空也不要紧。

然后用JS获取这个样式表:

最后我们就可以给这个样式表中添加样式了:

Box{width: 300px; height: 300px; background-color: #0f0;}',0);

如果是在上面所有例子的基础上添加的这段代码,那么显示结果会是这样的:

大小还是200*200大小,背景颜色是绿色,说明通过style.cssText所设置的宽高样式把通过insertRule()设置的样式覆盖了,原因很简单,style(包括style.cssText)方式设置的样式属于行内样式,自然要比通过insertRule()设置的样式优先级更高咯~~

那么,示例当中insertRule()的第二个参数0又是指的什么呢?

它指的是我们需要添加CSS代码的位置,所以参数0就代表的是该样式表的最开始位置。

例如,我们先给样式表中手动添加一段样式(以下例子与上述例子无关):

#Box{ width: 100px; height: 100px;}
Box{width: 300px; height: 300px; background-color: #0f0;}',0);

以上执行结果就是,宽高100*100的绿色盒子:

如果将insertRule()中的第二个参数改为1,那么通过JS添加的这段CSS代码相当于添加到了#Box{ width: 100px; height: 100px;}的后面,类似下面这样:

#Box{ width: 100px; height: 100px;} #Box{ width: 300px; height: 300px; background-color: #0f0;}

显示结果:

同样需要注意的是,insertRule()不兼容IE8及更早版本,但可以使用addRule()替代,语法稍微有点不同,上面例子这样写:

代码如下:
Box','width: 300px; height: 300px; background-color: #0f0;',0);

第一个参数代表元素,第二个参数代表CSS样式,第三个参数代表插入位置,前两个参数必选,最后一个可选,不填则默认为0。

结束语:浏览器兼容性问题对于前端开发者来说一直是个很头疼的问题,很多问题也是主要集中在IE上,只希望可恶的IE早日退出历史舞台吧!希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/js/36794.html

猜你在找的JavaScript相关文章