原生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 相关文章推荐
PJBlog插件 防刷新的在线播放器
Oct 25 Javascript
jQuery的实现原理的模拟代码 -3 事件处理
Aug 03 Javascript
输入框的字数时时统计—关于 onpropertychange 和 oninput 使用
Oct 21 Javascript
cookie 最近浏览记录(中文escape转码)具体实现
Jun 08 Javascript
jQuery的DOM操作之删除节点示例
Jan 03 Javascript
jquery form表单序列化为对象的示例代码
Mar 05 Javascript
js实现的简单radio背景颜色选择器代码
Aug 18 Javascript
jquery限定文本框只能输入数字(整数和小数)
Jan 08 Javascript
JS常见算法详解
Feb 28 Javascript
javascript简单链式调用案例分析
May 10 Javascript
微信小程序 上传头像的实例详解
Oct 27 Javascript
Node.js Koa2使用JWT进行鉴权的方法示例
Aug 17 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
web站点获取用户IP的安全方法 HTTP_X_FORWARDED_FOR检验
2013/06/01 PHP
php实现给图片加灰色半透明效果的方法
2014/10/20 PHP
php、mysql查询当天,查询本周,查询本月的数据实例(字段是时间戳)
2017/02/04 PHP
Laravel ORM 数据model操作教程
2019/10/21 PHP
js常用函数 不错
2006/09/08 Javascript
javascript 内存回收机制理解
2011/01/17 Javascript
js常用代码段整理
2011/11/30 Javascript
解析js中获得父窗口链接getParent方法以及各种打开窗口的方法
2013/06/19 Javascript
javascript检查表单数据是否改变的方法
2013/07/30 Javascript
原生javascript实现Tab选项卡切换功能
2015/01/12 Javascript
javascript实现多栏闭合展开式广告位菜单效果实例
2015/08/05 Javascript
jquery自定义插件——window的实现【示例代码】
2016/05/06 Javascript
浅谈JavaScript的push(),pop(),concat()方法
2016/06/03 Javascript
Web打印解决方案之证件套打的实现思路
2016/08/29 Javascript
详解AngularJS中的表单验证(推荐)
2016/11/17 Javascript
Javascript计算二维数组重复值示例代码
2016/12/18 Javascript
深入理解Vue 的条件渲染和列表渲染
2017/09/01 Javascript
mpvue项目中使用第三方UI组件库的方法
2018/09/30 Javascript
微信小程序调用天气接口并且渲染在页面过程详解
2019/06/24 Javascript
Linux下将Python的Django项目部署到Apache服务器
2015/12/24 Python
Python对列表去重的多种方法(四种方法)
2017/12/05 Python
hmac模块生成加入了密钥的消息摘要详解
2018/01/11 Python
浅谈Python实现2种文件复制的方法
2018/01/19 Python
Python实现自定义函数的5种常见形式分析
2018/06/16 Python
python 通过类中一个方法获取另一个方法变量的实例
2019/01/22 Python
Python函数返回不定数量的值方法
2019/01/22 Python
python实现按首字母分类查找功能
2019/10/31 Python
使用Python的networkx绘制精美网络图教程
2019/11/21 Python
基于python实现查询ip地址来源
2020/06/02 Python
Python分析最近大火的网剧《隐秘的角落》
2020/07/02 Python
CSS3的文字阴影—text-shadow的使用方法
2012/12/25 HTML / CSS
Cult Gaia官网:美国生活方式品牌
2019/08/16 全球购物
J2EE中的容器都包括哪些
2013/08/21 面试题
医学生自我评价
2014/01/27 职场文书
导游词之徐州-云龙山
2019/09/29 职场文书
Python3 类型标注支持操作
2021/06/02 Python