原生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 相关文章推荐
jQuery学习5 jQuery事件模型
Feb 07 Javascript
jQuery 前的按键判断代码
Mar 19 Javascript
自用js开发框架小成 学习js的朋友可以看看
Nov 16 Javascript
基于JavaScript自定义构造函数的详解说明
Apr 24 Javascript
jquery内置验证(validate)使用方法示例(表单验证)
Dec 04 Javascript
Javascript函数的参数
Jul 16 Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
Dec 21 Javascript
微信小程序微信支付接入开发实例详解
Apr 12 Javascript
javascript实现二叉树遍历的代码
Jun 08 Javascript
vue的token刷新处理的方法
Jul 17 Javascript
Vue3.0数据响应式原理详解
Oct 09 Javascript
vue实现瀑布流组件滑动加载更多
Mar 10 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缓存集成库phpFastCache用法
2014/12/15 PHP
优化WordPress中文章与评论的时间显示
2016/01/12 PHP
php 修改上传文件大小限制实例详解
2016/10/23 PHP
PHP实现微信申请退款功能
2018/10/01 PHP
基于Jquery的简单图片切换效果
2011/01/06 Javascript
js中document.write使用过程中的一点疑问解答
2014/03/20 Javascript
ie8模式下click无反应点击option无反应的解决方法
2014/10/11 Javascript
jquery对象和DOM对象的任意相互转换
2016/02/21 Javascript
jQuery短信验证倒计时功能实现方法详解
2016/05/25 Javascript
全面了解javascript中的错误处理机制
2016/07/18 Javascript
jQuery Mobile和HTML5开发App推广注册页
2016/11/07 Javascript
详解handlebars+require基本使用方法
2016/12/21 Javascript
深入理解vue路由的使用
2017/03/24 Javascript
angular2实现统一的http请求头方法
2018/08/13 Javascript
在vue项目中正确使用iconfont的方法
2018/09/28 Javascript
详解 微信小程序开发框架(MINA)
2019/05/17 Javascript
JavaScript面向对象中接口实现方法详解
2019/07/24 Javascript
详解小程序BackgroundAudioManager踩坑之旅
2019/12/08 Javascript
jQuery实时统计输入框字数及限制
2020/06/24 jQuery
[01:00:25]NB vs Secret 2018国际邀请赛小组赛BO1 B组加赛 8.19
2018/08/21 DOTA
[59:42]Secret vs Alliacne 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python解析json实例方法
2013/11/19 Python
Python正则表达式分组概念与用法详解
2017/06/24 Python
Python实现基本数据结构中栈的操作示例
2017/12/04 Python
pycharm打开命令行或Terminal的方法
2019/01/16 Python
python实现经纬度采样的示例代码
2020/12/10 Python
利用CSS3实现进度条的两种姿势详解
2017/03/21 HTML / CSS
使用html2canvas实现将html内容写入到canvas中生成图片
2020/01/03 HTML / CSS
大学毕业生个人自荐信范文
2014/01/08 职场文书
一分钟演讲稿
2014/04/30 职场文书
党员教师一句话承诺
2014/05/30 职场文书
2014年企业党支部工作总结
2014/12/04 职场文书
银行招聘自荐信
2015/03/06 职场文书
学校国庆节活动总结
2015/03/23 职场文书
爱国主义教育主题班会
2015/08/13 职场文书
MYSQL 运算符总结
2021/11/11 MySQL