这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
最近学习中遇到这个问题,为了日后方便查询,本人翻阅了一些资料总结了以下方法,仅限原生 JS,如有不对的地方欢迎指出!只求大家看完觉得有学到点什么就 OK 了!下面这篇文章主要介绍了利用原生 javascript 实现读写 CSS 样式的方法, 需要的朋友可以参考下。
前言
可能大家一说起操作 css 样式,很多人都会想到 jQuery 的 css 方法:
,但是有思考过如何使用原生 js 来实现类似的功能么?
- $(selector).css(name)
大家最熟悉的原生 js 操作样式的方法非 DOM 中的 Style 对象莫属了,但是这个方法只能获取和修改 html 文档中的内联样式,无法操作非内联样式(内部样式和外部样式表)。
我通过搜索和整理,总结了使用原生 js 对 css 样式的读写实现。下面话不多说,来看看详细的介绍吧。
获取样式
1. dom style
这个方法只能获取内联样式:
- var text = document.getElementById('text');
- var textColor = text.style.color;
- // 得到textColor的值为 '#000'
2. currentStyle
这个方法只适用于 IE 浏览器,在形式上与
相近,区别在于正如 currentStyle 其名——目前的样式(css 加载后的样式),返回的是元素当前最终的 CSS 属性值,包括了内部 style 标签里的样式和外部引入的 css 文件。
- element.style
用法:元素. 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 代码,也会把默认的祖宗八代都显示出来);而
只能获取元素 style 属性中的 CSS 样式。因此对于一个光秃秃的元素
- element.style
,getComputedStyle 方法返回对象中 length 属性值(如果有)就是 190+(据我测试 FF:192, IE9:195, Chrome:253, 不同环境结果可能有差异), 而
就是 0。
- element.style
引用自——张鑫旭博客文章
设置样式
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
总结
来源: http://www.phperz.com/article/17/0524/327462.html