利用原生JavaScript获取样式的方式小结

喜欢ヅ旅行 2022-08-13 00:41 173阅读 0赞

来源：[http://www.ido321.com/930.html][http_www.ido321.com_930.html]

ps：是获取样式，不是设置样式。若没有给元素设置样式值，则返回浏览器给予的默认值。（论坛整理）

1、element.style:只能获取写在元素标签中的style属性里的样式值，无法获取到定义在<style></style>和通过<link href=”css.css”>加载进来的样式属性

1: var ele = document.getElementById('ele');

2: ele.style.color;    //获取颜色

2、window.getComputedStyle():可以获取当前元素所有最终使用的CSS属性值。

1: window.getComputedStyle("元素", "伪类");

这个方法接受两个参数：要取得计算样式的元素和一个伪元素字符串（例如“:before”） 。如果不需要伪元素信息，第二个参数可以是null。也可以通过document.defaultView.getComputedStyle(“元素”, “伪类”);来使用

1: var ele = document.getElementById('ele');

2: var styles = window.getComputedStyle(ele,null);

3: styles.color;  //获取颜色

可以通过style.length来查看浏览器默认样式的个数。IE6-8不支持该方法，需要使用后面的方法。对于Firefox和Safari，会把颜色转换成rgb格式。

3、element.currentStyle:IE 专用，返回的是元素当前应用的最终CSS属性值（包括外链CSS文件，页面中嵌入的<style>属性等）。

1: var ele = document.getElementById('ele');

2: var styles = ele.currentStyle;

3: styles.color;

注意：对于综合属性border等，ie返回undefined，其他浏览器有的返回值，有的不返回，但是borderLeftWidth这样的属性是返回值的

4、getPropertyValue()：获取CSS样式的直接属性名称

1: var ele = document.getElementById('ele');

2: window.getComputedStyle(ele,null).getPropertyValue('color');

注意：属性名不支持驼峰格式，IE6-8不支持该方法，需要使用下面的方法

5、getAttribute()：与getPropertyValue类似，有一点的差异是属性名驼峰格式

1: var test = document.getElementById('test');

2: window.getComputedStyle(test, null).getPropertyValue("backgroundColor");

注意：该方法只支持IE6-8。

下面的获取样式方法兼容IE、chrome、FireFox等

1: function getStyle(ele) {

2:     var style = null;

3:

4:     if(window.getComputedStyle) {

5:         style = window.getComputedStyle(ele, null);

6:     }else{

7:         style = ele.currentStyle;

8:     }

9:

10:     return style;

11: }

在JQuery中，常用css()获取样式属性，其底层运作就应用了getComputedStyle以及getPropertyValue方法。

[http_www.ido321.com_930.html]: http://www.ido321.com/930.html

发表评论取消回复

表情：

评论列表（有 0 条评论，173人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript兼容浏览器获取元素的样式

获取元素正在使用的样式(只读样式，仅IE支持)：element.currentStyle.样式名称获取元素正在使用的样式(只读样式，IE8除外)：getComputedSt

落日映苍穹つ/ 2022年12月23日 03:29/ 0 赞/ 181 阅读

相关利用原生javascript制作简易计算器

第一步：利用html构建好计算器的大概形状样式 <table> <tr> <td colspan="4" ><input i

港控/mmm°/ 2022年11月25日 11:43/ 0 赞/ 215 阅读

相关利用原生JavaScript获取样式的方式小结

来源：[http://www.ido321.com/930.html][http_www.ido321.com_930.html] ps：是获取样式，不是设置样式。若没

喜欢ヅ旅行/ 2022年08月13日 00:41/ 0 赞/ 174 阅读

相关 javascript获取非行间样式的函数封装

/ 获取属性函数（兼容IE） @param {Object} box @param {Object} attribut /

电玩女神/ 2022年07月16日 02:16/ 0 赞/ 155 阅读

相关 JavaScript如何获取样式（行间）

前言：又接触了一些不知道的知识，真开心。下面的样式都只适用于行间样式！！！下面的样式都只适用于行间样式！！！下面的样式都只适用于行间样式！！！ 1、cssText

迈不过友情╰/ 2022年06月05日 06:08/ 0 赞/ 195 阅读

相关原生网页获取Android IMEI的方式

目前来说是无解的。尝试了很多种，原生网页在浏览器上是无法获取IMEI的。但是可以用稍微巧妙一点的方法。实现方法：安卓端内嵌WebView，安卓端获取IMEI之后通

深藏阁楼爱情的钟/ 2022年05月17日 09:28/ 0 赞/ 870 阅读

相关使用原生获取DOM元素的样式

我们在日常的工作场景下会遇到需要修改页面元素的样式问题，特别是使用原生js获取元素的样式，如果只是获取在元素的内联样式，可以通过Element.getAttribute(att

快来打我*/ 2022年05月11日 00:54/ 0 赞/ 319 阅读

相关 JS获取CSS样式的三种方式

JS获取CSS样式的三种方式第一种获取非行间的样式: 使用`getComputedStyle`与`currentStyle`属性获取样式这里第一个参数值获取那个选

分手后的思念是犯贱/ 2022年04月22日 06:46/ 0 赞/ 553 阅读

相关原生前端AJAX提交图片post方式利用fromdata方式

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

曾经终败给现在/ 2022年03月11日 02:50/ 0 赞/ 260 阅读

相关原生js获取元素样式

原生js获取元素样式最终版： function getStyle(ele) { var style = null;

红太狼/ 2020年06月22日 16:08/ 0 赞/ 879 阅读