原生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 相关文章推荐
JavaScript操作XML 使用百度RSS作为新闻源示例
Feb 17 Javascript
javascript延时加载之defer测试
Dec 28 Javascript
JavaScript function 的 length 属性使用介绍
Sep 15 Javascript
jquery easyui datagrid实现增加,修改,删除方法总结
May 25 Javascript
JavaScript中cookie工具函数封装的示例代码
Oct 11 Javascript
jQuery.Validate表单验证插件的使用示例详解
Jan 04 Javascript
Three.js中网格对象MESH的属性与方法详解
Sep 27 Javascript
JavaScript累加、迭代、穷举、递归等常用算法实例小结
May 08 Javascript
js计算两个日期间的天数月的实例代码
Sep 20 Javascript
通过实例解析js简易模块加载器
Jun 17 Javascript
layui当点击文本框时弹出选择框,显示选择内容的例子
Sep 02 Javascript
vue3.0搭配.net core实现文件上传组件
Oct 29 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获取文件夹路径内的图片以及分页显示示例
2014/03/11 PHP
jQuery对象和DOM对象使用说明
2010/06/25 Javascript
javascript客户端解决方案 缓存提供程序
2010/07/14 Javascript
jquery关于图形报表的运用实现代码
2011/01/06 Javascript
js对象的比较
2011/02/26 Javascript
javascript测试题练习代码
2012/10/10 Javascript
浅析JQuery获取和设置Select选项的常用方法总结
2013/07/04 Javascript
js清理Word格式示例代码
2014/02/13 Javascript
轻松创建nodejs服务器(3):代码模块化
2014/12/18 NodeJs
jquery+json实现分页效果
2016/03/07 Javascript
关于JavaScript限制字数的输入框的那些事
2016/08/14 Javascript
微信小程序 页面传参实例详解
2016/11/16 Javascript
jquery实现图片平滑滚动详解
2017/03/22 jQuery
详解webpack运行Babel教程
2018/06/13 Javascript
使用jquery Ajax实现上传附件功能
2018/10/23 jQuery
小程序实现左滑删除功能
2018/10/30 Javascript
javascript将16进制的字符串转换为10进制整数hex
2020/03/05 Javascript
jQuery中getJSON跨域原理的深入讲解
2020/09/02 jQuery
[01:23]2014DOTA2国际邀请赛 球迷无处不在Ti现场世界杯受关注
2014/07/10 DOTA
[01:06:43]完美世界DOTA2联赛PWL S3 PXG vs GXR 第二场 12.19
2020/12/24 DOTA
python错误:AttributeError: 'module' object has no attribute 'setdefaultencoding'问题的解决方法
2014/08/22 Python
Python中的装饰器用法详解
2015/01/14 Python
在Docker上部署Python的Flask框架的教程
2015/04/08 Python
利用Python批量生成任意尺寸的图片
2016/08/29 Python
Python获取二维矩阵每列最大值的方法
2018/04/03 Python
python爬虫爬取微博评论案例详解
2019/03/27 Python
Django 创建新App及其常用命令的实现方法
2019/08/04 Python
Python 脚本的三种执行方式小结
2019/12/21 Python
Python下利用BeautifulSoup解析HTML的实现
2020/01/17 Python
python使用opencv resize图像不进行插值的操作
2020/07/05 Python
SOA的常见陷阱或者误解是什么
2014/10/05 面试题
城市轨道专业个人求职信范文
2013/09/23 职场文书
运动会入场口号
2014/06/07 职场文书
青年教师师德演讲稿
2014/08/26 职场文书
趣味运动会通讯稿
2015/07/18 职场文书
Python预测分词的实现
2021/06/18 Python