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

前言

可能大家一说起操作css样式，很多人都会想到jquery的css方法：$(selector).css(name) ，但是有思考过如何使用原生js来实现类似的功能么？

大家最熟悉的原生js操作样式的方法非dom中的style对象莫属了，但是这个方法只能获取和修改html文档中的内联样式，无法操作非内联样式（内部样式和外部样式表）。

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

获取样式

1. dom style

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

var text = document.getelementbyid('text');
var textcolor = text.style.color;

// 得到textcolor的值为 '#000'

2. currentstyle

这个方法只适用于ie浏览器，在形式上与element.style相近，区别在于正如currentstyle其名——目前的样式（css加载后的样式），返回的是元素当前最终的css属性值，包括了内部style标签里的样式和外部引入的css文件。

用法：元素.currentstyle.属性

比如我们要获取id为box的width：

var boxwidth = document.getelementbyid('box').currentstyle.width;

// 得到boxwidth的值为 '200px'

3. getcomputedstyle

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

在兼容性上，基本支持：chrome、firfox、ie9、opera、safari

用法：getcomputedstyle(元素, 伪类).属性，第二个参数如果不是伪类就设置为null吧。

var el = document.getelementbyid("box");
var style = window.getcomputedstyle(el , ":after");

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

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

// 这个函数需要传递两个参数：元素对象和样式属性名称

function getstyle(el, stylename) {

 if( el.currentstyle ) {
 
 // for ie
 return el.currentstyle[stylename];
 
 } else {
 
 // for peace
 return getcomputedstyle(el, false)[stylename];
 }
 
}

接着调用这个函数来获取box的宽度：

var box = document.getelementbyid("box");

var boxwidth = getstyle(box, 'width');

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

getcomputedstyle与style的区别？

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

只读与可写

getcomputedstyle方法是只读的，只能获取样式而不能设置，但是element.style既能读也能写。

获取的对象范围

getcomputedstyle方法获取的是最终应用在元素上的所有css属性对象（即使没有css代码，也会把默认的祖宗八代都显示出来）；而element.style只能获取元素style属性中的css样式。因此对于一个光秃秃的元素<p>，getcomputedstyle方法返回对象中length属性值（如果有）就是190+(据我测试ff:192, ie9:195, chrome:253, 不同环境结果可能有差异), 而element.style就是0。

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

设置样式

1. dom style

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

var el = document.getelementbyid('box');
el.style.backgroundcolor = 'red';

2. csstext属性

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

它的用法和innerhtml类似： document.getelementbyid("d1").style.csstext = "color:red; font-size:13px;";

详细请参考： cssrule.csstext - web apis | mdn

总结

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