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


Posted in Javascript onFebruary 20, 2017

前言

可能大家一说起操作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能带来一定的帮助,如果有疑问大家可以留言交流。谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
select标签模拟/美化方法采用JS外挂式插件
Apr 01 Javascript
jQuery中ajax的post()方法用法实例
Dec 26 Javascript
JS获取子窗口中返回的数据实现方法
May 28 Javascript
温习Javascript基础语法之词法结构
May 31 Javascript
全面了解JavaScirpt 的垃圾(garbage collection)回收机制
Jul 11 Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
Aug 19 Javascript
vue+Java后端进行调试时解决跨域问题的方式
Oct 19 Javascript
js登录滑动验证的实现(不滑动无法登陆)
Jan 03 Javascript
React全家桶环境搭建过程详解
May 18 Javascript
原生JS实现动态加载js文件并在加载成功后执行回调函数的方法
Dec 30 Javascript
react的滑动图片验证码组件的示例代码
Feb 27 Javascript
使用Vue实现调用接口加载页面初始数据
Oct 28 Javascript
JS实现中国公民身份证号码有效性验证
Feb 20 #Javascript
js中new一个对象的过程
Feb 20 #Javascript
利用node.js搭建简单web服务器的方法教程
Feb 20 #Javascript
jQuery实现鼠标跟随效果
Feb 20 #Javascript
BootStrap fileinput.js文件上传组件实例代码
Feb 20 #Javascript
Bootstrap jquery.twbsPagination.js动态页码分页实例代码
Feb 20 #Javascript
分享一道关于闭包、bind和this的面试题
Feb 20 #Javascript
You might like
php外部执行命令函数用法小结
2016/10/11 PHP
thinkPHP5框架实现基于ajax的分页功能示例
2018/06/12 PHP
PHP实现的62进制转10进制,10进制转62进制函数示例
2019/06/06 PHP
js 字符串转化成数字的代码
2011/06/29 Javascript
jquery实现metro效果示例代码
2013/09/06 Javascript
js函数在frame中的相互调用详解
2014/03/03 Javascript
js 实现浏览历史记录示例
2014/04/20 Javascript
Node.js中HTTP模块与事件模块详解
2014/11/14 Javascript
浅谈Unicode与JavaScript的发展史
2015/01/19 Javascript
javascript动态修改Li节点值的方法
2015/01/20 Javascript
DOM 事件的深入浅出(一)
2016/12/05 Javascript
详解webpack分离css单独打包
2017/06/21 Javascript
JS实现按钮添加背景音乐示例代码
2017/10/17 Javascript
Windows安装Node.js报错:2503、2502的解决方法
2017/10/25 Javascript
AngularJS集合数据遍历显示的实例
2017/12/27 Javascript
vue.js 实现点击展开收起动画效果
2018/07/07 Javascript
详解使用angular框架离线你的应用(pwa指南)
2019/01/31 Javascript
VsCode里的Vue模板的实现
2020/08/12 Javascript
用vue写一个日历
2020/11/02 Javascript
[45:18]完美世界DOTA2联赛循环赛 PXG vs IO 第二场 11.06
2020/11/09 DOTA
python冒泡排序算法的实现代码
2013/11/21 Python
python的urllib模块显示下载进度示例
2014/01/17 Python
python使用opencv进行人脸识别
2017/04/07 Python
python中实现将多个print输出合成一个数组
2018/04/19 Python
python3 使用Opencv打开USB摄像头,配置1080P分辨率的操作
2019/12/11 Python
PyTorch实现重写/改写Dataset并载入Dataloader
2020/07/14 Python
基于Python爬取京东双十一商品价格曲线
2020/10/23 Python
python opencv肤色检测的实现示例
2020/12/21 Python
Python读写Excel表格的方法
2021/03/02 Python
贝斯特韦斯特酒店集团官网:Best Western
2019/01/03 全球购物
商务专员岗位职责
2013/11/23 职场文书
党的群众路线教育实践活动宣传标语口号
2014/06/06 职场文书
历史学专业求职信
2014/06/19 职场文书
支行行长岗位职责
2015/02/15 职场文书
联谊会开场白
2015/06/01 职场文书
MySQL去除重叠时间求时间差和的实现
2021/08/23 MySQL