原生javascript实现读写CSS样式的方法详解
最近学习中遇到这个问题,为了日后方便查询,本人翻阅了一些资料总结了以下方法,仅限原生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实现读写CSS样式的方法详解相关文章请关注PHP中文网!

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

热门话题

Python和JavaScript开发者的薪资没有绝对的高低,具体取决于技能和行业需求。1.Python在数据科学和机器学习领域可能薪资更高。2.JavaScript在前端和全栈开发中需求大,薪资也可观。3.影响因素包括经验、地理位置、公司规模和特定技能。

JavaScript是现代Web开发的基石,它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发,极大地提升了用户体验和跨平台开发的灵活性。

如何在JavaScript中将具有相同ID的数组元素合并到一个对象中?在处理数据时,我们常常会遇到需要将具有相同ID�...

实现视差滚动和元素动画效果的探讨本文将探讨如何实现类似资生堂官网(https://www.shiseido.co.jp/sb/wonderland/)中�...

学习JavaScript不难,但有挑战。1)理解基础概念如变量、数据类型、函数等。2)掌握异步编程,通过事件循环实现。3)使用DOM操作和Promise处理异步请求。4)避免常见错误,使用调试技巧。5)优化性能,遵循最佳实践。

深入探讨console.log输出差异的根源本文将分析一段代码中console.log函数输出结果的差异,并解释其背后的原因。�...

探索前端中类似VSCode的面板拖拽调整功能的实现在前端开发中,如何实现类似于VSCode...
