Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >利用原生JavaScript获取样式的方式小结

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

作者头像
全栈程序员站长
发布于 2022-07-10 09:21:06
发布于 2022-07-10 09:21:06
34600
代码可运行
举报
运行总次数:0
代码可运行

大家好,又见面了,我是全栈君。

来源:http://www.ido321.com/930.html

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

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
   1: var ele = document.getElementById('ele');
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
   2: ele.style.color;    //获取颜色

2、window.getComputedStyle():能够获取当前元素全部终于使用的CSS属性值。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
   1: window.getComputedStyle("元素", "伪类");

这种方法接受两个參数:要取得计算样式的元素和一个伪元素字符串(比如“:before”) 。

假设不须要伪元素信息,第二个參数能够是null。

也能够通过document.defaultView.getComputedStyle(“元素”, “伪类”);来使用

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
   1: var ele = document.getElementById('ele');
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
   2: var styles = window.getComputedStyle(ele,null);
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
   3: styles.color;  //获取颜色

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

3、element.currentStyle:IE 专用。返回的是元素当前应用的终于CSS属性值(包含外链CSS文件,页面中嵌入的<style>属性等)。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
   1: var ele = document.getElementById('ele');
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
   2: var styles = ele.currentStyle;
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
   3: styles.color;

注意:对于综合属性border等。ie返回undefined,其它浏览器有的返回值。有的不返回。可是borderLeftWidth这种属性是返回值的

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
   1: var ele = document.getElementById('ele');
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
   2: window.getComputedStyle(ele,null).getPropertyValue('color');

注意:属性名不支持驼峰格式。IE6-8不支持该方法。须要使用以下的方法

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
   1: var test = document.getElementById('test');
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
   2: window.getComputedStyle(test, null).getPropertyValue("backgroundColor");

注意:该方法仅仅支持IE6-8。

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
   1: function getStyle(ele) {
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
   2:     var style = null;
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
   3:     
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
   4:     if(window.getComputedStyle) {
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
   5:         style = window.getComputedStyle(ele, null);
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
   6:     }else{
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
   7:         style = ele.currentStyle;
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
   8:     }
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
   9:     
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
  10:     return style;
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
  11: }

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

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/115275.html原文链接:https://javaforall.cn

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022年2月6,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
12样式操作
获取内联样式 <p id="p1" style="color: red;">666</p> 内联样式即写在标签里的样式(返回文本类型) var pElement = document.getElementById('p1').getAttribute('style') console.log(pElement) 通过DOM对象获取。(返回对象) var pElement = document.getElementById('p1') console.log(pElement.style) 对象的方法如下:
Dreamy.TZK
2020/04/22
3740
12样式操作
JavaScript强化教程——style、currentStyle、getComputedStyle区别介绍
本文为 H5EDU 机构官方 HTML5 教程,主要介绍了 style、currentStyle、getComputedStyle 三者的区别。style 是内联样式,只能应用于单个元素;currentStyle 是元素的运行时样式,可以应用于同一个文档中的多个元素;getComputedStyle 是获取元素样式信息的函数,可以获取指定元素的所有样式信息。
IMWeb前端团队
2017/12/29
7580
JavaScript强化教程——style、currentStyle、getComputedStyle区别介绍
本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 —— style、currentStyle、getComputedStyle区别介绍 style、currentStyle、getComputedStyle区别介绍 样式表有三种方式 内嵌样式(inline Style) :是写在Tag里面的,内嵌样式只对所有的Tag有效。
IMWeb前端团队
2019/12/05
1.2K0
利用JavaScript获取浏览器计算后的样式
HTML5学堂:JavaScript可以用style对象给标签设置样式、获取样式,但是利用style对象获取的样式只能是标签内联的样式,今天要给大家讲解的是利用currentStyle对象与getComputedStyle方法来获取浏览器计算后的样式。 哪些样式是属于浏览器计算后的样式 要检测标签的样式有包含在头部书写样式、标签内联样式和外部的样式,即浏览器计算后的样式。 getComputedStyle(element[, pseudoElt])方法 element用于计算样式的标签;pseudoElt可
HTML5学堂
2018/03/12
9720
利用JavaScript获取浏览器计算后的样式
原生JavaScript获取元素的margin外边距
最近想找一个可以获取元素高度(包括外边距margin)的方法,原生JS的实现方法一直没有找到,不过有一个方法可以获取元素的边距,记录一下:
德顺
2019/11/13
9.7K1
currentStyle使用示例[通俗易懂]
Dom中的currentStyle属性.从字面上理解这是当前样式风格.没错currentStyle就是用来获取元素内Css的style样式属性值.比如说元素的width值height值.甚至元素的文本排放方式text-align,包括position等等.所有的css属性值都可以被获取.但是currentStyle仅支持IE浏览器,如若想在FF或基于Dom标准的其他浏览器内实现相同效果.请使用getComputedStyle属性.我在下面给出一个例子,来获取div的宽度值,文本如何排放.和绝对定位的值.已支持IE和FF其他浏览器.放心浏览!
全栈程序员站长
2022/09/14
4580
前端项目遇到的问题(一)
时隔2年重新写写文章,23年6月在公司躲过了2次人员优化的我,在第三次主动领取大礼包。在家gap三个月(跑过滴滴、接过兼职),到新公司一系列经历感到身心极其emo,整个人都很抑郁(从公司离职到新环境的适应、公司福利待遇落差、家庭琐事等等)在这里想要感谢我现在的leader,给我的一些建议和帮助,让我慢慢走出那段差劲的状态。
一起重学前端
2024/09/18
1200
第六节盒子模型和盒子模型偏移量
------------------------------------盒子模型常用的八个属性--------------------------------- Js盒子模型 Js盒子模型指的是通过js提供的一系列的属性和方法,获取页面中元素的样式信息值 client系列(当前元素的私有属性) clientWidth/clientHeight:内容的宽度/高度+左右/上下填充,(和内容溢出没有关系) clientLeft:左边框的宽度(borderLeftWidth) clientTop:上
河湾欢儿
2018/09/06
1K0
前端学习(48)~通过style对象获取和设置行内样式
需要注意的是:style是一个对象,只能获取行内样式,不能获取内嵌的样式和外链的样式。例如:
Vincent-yuan
2020/03/19
1.5K0
【CSS进阶】原生JS getComputedStyle等方法解析
最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美。 其结构明晰,高内聚、低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷、渐进增强)优雅的处理能力以及 Ajax 等方面周到而强大的定制功能无不令人惊叹。 另外,阅读源码让我接触到了大量底层的知识。对原生JS 、框架设计、代码优化有了全新的认识,接下来将会写一系列关于 jQuery 解析的文章。 我在 github 上关于 jQuery 源码的全文注解,感兴趣的可以围观一下。jQuer
Sb_Coco
2018/05/28
1.6K0
getComputedStyle与currentStyle[通俗易懂]
本文参考https://developer.mozilla.org/en-US/docs/Web/API/Window.getComputedStyle
全栈程序员站长
2022/09/14
2.4K0
getComputedStyle与currentStyle[通俗易懂]
5 个 JavaScript “罕见”原生的 API
一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第7天,点击查看活动详情。
掘金安东尼
2022/09/19
4390
5 个 JavaScript “罕见”原生的 API
第208天:jQuery框架封装(一)
1.1冒泡:事件按照从最特定的事件目标到最不特定的事件目标(document对象或者body)的顺序触发。
半指温柔乐
2018/09/11
7850
js之dom元素样式操作
document.defaultView.getComputedStyle(element[,pseudo-element]);
IT工作者
2022/01/15
10.9K0
HTML5-类库系列 事件与获取完成版样式
HTML5学堂:最近讲师团队在学习JS类库的知识,因此就跟大家一起共享一下类库的搭建吧。今天要讲解的功能是:获取渲染后样式以及事件兼容处理。渲染后样式修正了通过style属性获取样式的不足,而事件兼容问题主要考虑了this的指向修正。 获取完成(渲染后)样式 在IE下,对于获取渲染后的样式,使用currentStyle进行获取,而对于FF,使用的是getComputedStyle方法进行获取。两者的语法并不相同。元素.currentStyle[属性],也可以用点语法进行书写;而getComputedStyl
HTML5学堂
2018/03/12
8450
HTML5-类库系列 事件与获取完成版样式
第60天:js常用访问CSS属性的方法
点语法可以得到 width  属性  和 top属性  带有单位的。 100px
半指温柔乐
2018/09/11
1.1K0
给网站加上全局字体增大减小功能(自适应) JavaScript
使用 JavaScript 给网站加上全局字体增大减小的功能,自适应 字体有时候小或者大都会影响用户体验,所以添加一个自助调节字体大小的功能是非常方便好用的
xlj
2021/07/14
1.3K0
h5新功能data-*,好好利用,还能做数据双向绑定
标题是data-,但是这里主要讲伪元素,看明白就知道了 1、jQuery Selectors 获取伪元素的属性值 虽然JS里没有可以直接操作伪元素的选择符,然而获取其CSS属性的方法还是有的。 window.getComputedStyle 利用window.getComputedStyle方法选择到伪元素,然后利用getPropertyValue方法获取对应的属性的值。 根据MDN的文档, window.getComputedStyle(element[, pseudoElt]); 此方法包含两个参数,一
前朝楚水
2018/04/02
1.9K0
js获取元素样式之getComputedStyle方法
习惯了jquery的同学应该都知道获取元素样式的方式可以直接写成(obj).css(style);更方便的获取高度宽度等一些样式可以直接使用(obj).height()和
OECOM
2020/07/02
23K0
「css基础」你想知道的伪元素内容都在这篇文章里(长文值得收藏)
最近因为一些网页的需要,需要比较深入的使用了CSS 的「伪元素」( Pseudo Element ),发现原来不只是用用before或after 而已,可以玩的东西还真是不少,所以就来篇文章,把这些比较不常玩的用法归纳整理下,希望对你的日常工作有所帮助。
前端达人
2019/08/23
1K0
「css基础」你想知道的伪元素内容都在这篇文章里(长文值得收藏)
推荐阅读
相关推荐
12样式操作
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验