原生javascript实现读写CSS样式的方法详解

　　

　　

可能大家一说起操作css样式,很多人都会想到jQuery的css方法:<代码>(选择)美元。css(名字)> 　　

大家最熟悉的原生js操作样式的方法非DOM中的风格对象莫属了,但是这个方法只能获取和修改html文档中的内联样式,无法操作非内联样式(内部样式和外部样式表)。

　　

我通过搜索和整理,总结了使用原生js对css样式的读写实现。下面话不多说,来看看详细的介绍吧。

　　


　　

　　

<强> 1。dom风格
　　

　　

这个方法只能获取内联样式:

　　 　　 　　var文本=. getelementbyid('文本'); 　　输入textColor=text.style.color var;//得到输入textColor的值为“# 000” 　　 　　

<强> 2。currentStyle
　　

　　

这个方法只适用于IE浏览器,在形式上与<代码> element.style> 　　

用法:元素.currentStyle。属性

　　

比如我们要获取id为盒子的宽度:
　　

　　 　　 　　var boxWidth=. getelementbyid(箱).currentStyle.width;//得到boxWidth的值为“200 px” 　　 　　

<强> 3。getComputedStyle
　　

　　

getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式声明对象([对象CSSStyleDeclaration]),并且是只读的。

　　

在兼容性上,基本支持:Chrome, Firfox, IE9,歌剧,Safari

　　

用法:getComputedStyle(元素,伪类)。属性,第二个参数如果不是伪类就设置为零吧。

　　 　　 　　var el=. getelementbyid(“盒”); 　　var=窗口风格。getComputedStyle (el,“:”); 　　 　　

来~封装一个通用的获取样式的函数
　　

　　

为了适用于各大主流浏览器,我们来写一个函数:

　　 　　//这个函数需要传递两个参数:元素对象和样式属性名称 　　 　　styleName属性函数getStyle (el) { 　　 　　如果(el)。currentStyle) {//即 　　返回el.currentStyle [styleName属性]; 　　 　　其他}{//为和平 　　假返回getComputedStyle (el) [styleName属性]; 　　} 　　 　　} 　　 　　

接着调用这个函数来获取箱子的宽度:

　　 　　 　　var盒=. getelementbyid(“盒”); 　　 　　var boxWidth=getStyle(盒子,“宽度”); 　　 　　

这个函数并没有考虑到对伪类的相关操作,可以根据需要自行扩展~

　　


　　

　　

既然都是获取样式属性的值,它们有啥区别呢:

　　

<强>只读与可写

　　

getComputedStyle方法是只读的,只能获取样式而不能设置,但是<代码> element.style> 　　

<强>获取的对象范围

　　

getComputedStyle方法获取的是最终应用在元素上的所有CSS属性对象(即使没有CSS代码,也会把默认的祖宗八代都显示出来);而<代码> element.style> element.style> 　　

引用自——张鑫旭博客文章

　　


　　

　　

<强> 1。dom风格
　　

　　

这个不用说了吧,比如把元素的背景颜色改为红色:

　　 　　 　　var el=. getelementbyid(盒); 　　el.style。写成backgroundColor=焐? 　　 　　

<强> 2。cssText属性
　　

　　

cssText的本质就是设置HTML元素的风格属性值。它是一组样式属性及其值的文本表示。这个文本格式化为一个CSS样式表,去掉了包围属性和值的元素选择器的花括号。

　　

它的用法和innerHTML类似:<代码> . getelementbyid (d1) .style。cssText="颜色:红色;字体大小:13 px;”;

　　

详细请参考:CSSRule。cssText - Web api | MDN

　　

　　

以上就是这篇文章的全部内容了,希望本文的内容对大家学习或者使用Javascript能带来一定的帮助,如果有疑问大家可以留言交流。谢谢大家对的支持。
　　

原生javascript实现读写CSS样式的方法详解