Rumah > hujung hadapan web > tutorial js > js设置元素样式步奏详解

js设置元素样式步奏详解

php中世界最好的语言
Lepaskan: 2018-04-18 15:41:18
asal
1530 orang telah melayarinya

这次给大家带来js设置元素样式步奏详解,js设置元素样式的注意事项有哪些,下面就是实战案例,一起来看一下。

很多人对于js的开发中,不知道其元素样式具体怎么设置,这次文章就给大家带来js设置教程,让大家更好的了解js怎么设置的,感兴趣的下面一起来看看。

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

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

一、style

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

<p id="box"></p>
Salin selepas log masuk
var box = document.getElementById("box");
box.style.width = '100px';
box.style.height = '100px';
box.style.backgroundColor = "#f00";
Salin selepas log masuk

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

二、style.cssText

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

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

例如:

box.style.cssText = 'width: 200px; height: 200px; border: 1px solid #f00;';
Salin selepas log masuk

确实,写法上很方便。

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

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

var 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;';
Salin selepas log masuk

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

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

三、insertRule()

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

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

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

首先头部引入样式表:

<link rel="stylesheet" type="text/css" href="css/index.css" rel="external nofollow" />
Salin selepas log masuk

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

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

var sheet = document.styleSheets[0];
Salin selepas log masuk

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

sheet.insertRule('#box{width: 300px; height: 300px; background-color: #0f0;}',0);
Salin selepas log masuk

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

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

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

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

<style>
  #box{ width: 100px; height: 100px;}
</style>
Salin selepas log masuk
var sheet = document.styleSheets[0];
sheet.insertRule('#box{width: 300px; height: 300px; background-color: #0f0;}',0);
Salin selepas log masuk

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

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

<style>
  #box{ width: 100px; height: 100px;}
  #box{ width: 300px; height: 300px; background-color: #0f0;}
</style>
Salin selepas log masuk

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

复制代码 代码如下:

	sheet.addRule('#box','width: 300px; height: 300px; background-color: #0f0;',0);	
Salin selepas log masuk

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

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:



Atas ialah kandungan terperinci js设置元素样式步奏详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan