javascript写css样式,原生javascript实现读写CSS样式的方法详解
原生javascript实现读写CSS样式的方法详解
发布于 2017-05-24 15:05:31 | 120 次阅读 | 评论: 0 | 来源: 网友投递
JavaScript客户端脚本语言Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
最近学习中遇到这个问题,为了日后方便查询,本人翻阅了一些资料总结了以下方法,仅限原生JS,如有不对的地方欢迎指出!只求大家看完觉得有学到点什么就OK了!下面这篇文章主要介绍了利用原生javascript实现读写CSS样式的方法,需要的朋友可以参考下。
前言
可能大家一说起操作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样式。因此对于一个光秃秃的元素
,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;";
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家学习或者使用Javascript能带来一定的帮助,如果有疑问大家可以留言交流。谢谢大家对phperz的支持。
相关阅读:
原生javascript实现读写CSS样式的方法详解
JS读写CSS样式的方法汇总
JavaScript操作HTML元素和样式的方法详解
详解原生JavaScript实现jQuery中AJAX处理的方法
PHP与JavaScript针对Cookie的读写、交互操作方法详解
JavaScript 中有关数组对象的方法(详解)
jQuery给元素添加样式的方法详解
javascript避免数字计算精度误差的方法详解
JavaScript获取URL中参数querystring的方法详解
JavaScript定义及输出螺旋矩阵的方法详解
如何用JavaScript实现动态修改CSS样式表
JavaScript改变CSS样式的方法汇总
javascript写css样式,原生javascript实现读写CSS样式的方法详解相关推荐
- CSS HACK收集:在IE6下hack的方法详解
原文:http://www.html5cn.org/article-5027-1.html + 针对IE7 * 针对ie6和ie7 _ 针对ie6 最好采用条件注释的方法 本篇文章小编为大家介绍CS ...
- html5 二进制数据解析,JavaScript读写二进制数据的方法详解
前言 二进制是计算技术中广泛采用的一种数制.二进制数据是用0和1两个数码来表示的数,如果想要在前端中处理音频和视频.那你必须要对二进制数据有很好地掌握和操作能力.下面话不多说了,来一起看看详细介绍的吧 ...
- php中this的使用技巧,JavaScript中this关键字使用方法详解
JavaScript中this关键字使用方法详解 在面向对象编程语言中,对于this关键字我们是非常熟悉的.比如C++.C#和Java等都提供了这个关键字,虽然在开始学习的时候觉得比较难,但只要理解了 ...
- JS/JavaScript中解析JSON --- JSON.parse()、JSON.stringify()以及$.parseJSON()使用详解
JS/JavaScript中解析JSON --- JSON.parse().JSON.stringify()以及$.parseJSON()使用详解 现在JSON格式在web开发中非常重要,特别是在使用 ...
- JavaScript重难点解析4(作用域与作用域链、闭包详解)
JavaScript重难点解析4(作用域与作用域链.闭包详解) 作用域与作用域链 作用域 作用域与执行上下文 作用域链 闭包 闭包理解 将函数作为另一个函数的返回值 将函数作为实参传递给另一个函数调用 ...
- 3种Javascript图片预加载的方法详解
3种Javascript图片预加载的方法详解 预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度. 这对图片画廊及图片占据很大比例 ...
- 在HTML文档中使用JavaScript的方法详解
在HTML文档中使用JavaScript的方法详解 本文详细介绍,在HTML文档(也称为HTML页面或网页)中使用JavaScript脚本代码的多种方法. 假设要用JS生成字符☆直角三角形 实现Jav ...
- JavaScript中getBoundingClientRect()方法详解
JavaScript中getBoundingClientRect()方法详解 getBoundingClientRect() 这个方法返回一个矩形对象,包含四个属性:left.top.right和bo ...
- java调用javascript函数_[Java教程]JavaScript函数的4种调用方法详解
[Java教程]JavaScript函数的4种调用方法详解 0 2016-08-09 00:00:12 在JavaScript中,函数是一等公民,函数在JavaScript中是一个数据类型,而非像C# ...
最新文章
- php 数组美化_php 打印数组格式化显示
- 【机器视觉】 endif算子
- 《斑点狗眼里的世界》一书的铅笔画插图
- 【渝粤题库】陕西师范大学209006教育政策与法规作业(高起专、高起本)
- script标签属性用type还是language?
- 项目实战Git团队操作_图形化版本
- Python稳基修炼的经典案例12(计算机二级、初学者必会的字符文件处理)
- invalid comparison: java.util.Date and java.lang.String
- [Coci2015]Divljak
- 《嵌入式系统开发之道——菜鸟成长日志与项目经理的私房菜》——01-05 基本职能:老鸟也曾是菜鸟...
- 详解ThroughTek P2P 供应链漏洞对数百万物联网设备的安全新风险
- 【原创翻译】深入理解javascript事件处理函数绑定三部曲(一)——早期的事件处理函数...
- Objective-C日记-之KVC
- cc2530按键流水灯c语言程序,CC2530流水灯程序
- 《数字图像处理》冈萨雷斯版 读书笔记(一)
- vc707(virtex7)led 实验例程
- Null check operator used on a null value
- Android群英传 笔记1 安卓 系统架构和开发工具
- jmeter+PerfMon Metrics Collector监控(ServerAgent)
- 软件测试V模型和W模型的区别
热门文章
- 关于vmware中的某个虚拟机死机且无法关机问题的快速解决办法
- android dialog圆角显示及解决出现的黑色棱角.(友情提示)
- 利用cloudflare让未备份域名转发至自己服务器地址
- java 汉字 字节_java中的汉字占几个字节
- java单元测试如何全覆盖_单元测试代码覆盖率的浅谈
- pytorch测试代码
- 如何测试pytorch-gpu版本和tensorflow-gpu版本是否安装成功,测试代码如下,在想要测试的环境中将两段代码分别输入测试即可
- 怎么取消计算机的用户名和密码怎么设置密码,怎么取消电脑开机密码 取消电脑开机密码方法介绍...
- Linux查看用户列表
- 嵌入式Linux kernel LOGO的更换方法