麦子学院 2017-02-25 10:37

使用原生javascript读写CSS样式

回复:0 查看:3968

一说起操作css 样式很多人都会想到 jQuery 的 css 方法： $(selector).css(name) ，但是有思考过如何使用原生javascript 来实现类似的功能么？本文和大家分享的就是使用原生javascript 实现 css 样式相关内容，一起来看看吧，希望对大家学习javascript有所帮助。

　　大家最熟悉的原生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 的区别？

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

　　1. 只读与可写

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

　　2. 获取的对象范围

　　getComputedStyle 方法获取的是最终应用在元素上的所有 CSS 属性对象（即使没有 CSS 代码，也会把默认的祖宗八代都显示出来）；而 element.style 只能获取元素 style 属性中的 CSS 样式。因此对于一个光秃秃的元素

，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;";

来源：悟空的博客