JavaScript获取元素CSS计算后的样式
原文链接https://www.w3ctech.com/topic/40
我们在开发过程中,有时候需要根据元素已有样式来实现一些效果,那我们应该如何通过JavaScript来获取一个元素计算后的样式值呢?
原生JS方法
可以使用document.defaultView提供的getComputedStyle()方法。该方法接受两个参数:需要取得计算样式的元素和一个伪元素字符串(例":after")。如果不需要伪元素信息,第二个参数为null。代码示例如下:
var idVal = document.getElementById("test");
var computedStyle = document.defaultView.getComputedStyle(idVal, null); console.log(computedStyle.backgroundColor);
console.log(computedStyle.width);
console.log(computedStyle.height);
console.log(computedStyle.border);
IE11以前的版本不支持getComputedStyle()方法,不过他提供的另外一个方法可以实现我们想要的结果,这就是:currentStyle。代码示例如下:
var idVal = document.getElementById("test");
var computedStyle = idVal.currentStyle; alert(computedStyle.backgroundColor);
alert(computedStyle.width);
alert(computedStyle.height);
alert(computedStyle.border);
jQuery获取计算样式的方法
#("#id").css("width");
注意:IE没有返回border的值为空。
还需要注意的事,不管在什么浏览器中,获取到的计算的样式都是只读的;不能修改计算后样式对象中的CSS属性。此外,计算后的样式也包含属于浏览器内部样式表的样式信息,因此任何具有默认值的CSS属性都会表现在计算后的样式中。CSS属性的默认值在不同浏览器中可能是不同的。如果你需要元素具有某个特定的默认值,应该手工在样式表中指定该值。
JavaScript获取元素CSS计算后的样式的更多相关文章
- javascript获取元素的计算样式
使用css控制页面有4种方式,分别为行内样式(内联样式).内嵌式.链接式.导入式. 行内样式(内联样式)即写在html标签中的style属性中,如<div style="width:1 ...
- JavaScript获取元素CSS属性
function getDefaultStyle(obj,attribute){ return obj.currentStyle?obj.currentStyle[attribute]:documen ...
- JS获取对象在内存中计算后的样式
通过obj.style的方式只能取得"内联style"的值,对于<style></style>中的css属性值,则无能为力 . 我们可以用obj.curre ...
- JavaScript获取元素样式
原生的JavaScript获取写在标签内部的样式很简单: <div class="test" id="test" style="width:10 ...
- 前端笔记之JavaScript(八)关于元素&计算后的样式
一.获取元素方法(JS选择器) 1.1概述 得到id元素的方法 document.getElementById() 得到一个元素.事实上,还有一个方法可以得到标签元素,并且得到的是多个元素: docu ...
- JavaScript的DOM_通过计算后样式来获取
虽然可以通过 style 来获取单一值的 CSS 样式,但对于复合值的样式信息,就需要通过计算样式来获取. DOM2 级样式,window 对象下提供了 getComputedStyle()方法.接受 ...
- javascript 获取元素样式的方法
javascript 获取元素样式常用方法. Javascript获取CSS属性值方法:getComputedStyle和currentStyle 1 .对于元素的内联CSS样式(<div s ...
- JS---获取元素计算后的样式属性值 (getComputedStyle)---兼容函数
获取计算后的样式属性----获取一个元素任意一个样式属性值 获取元素距离左边位置的值 会有如下兼容性问题: my$("btn").onclick = function () { / ...
- (转载)记录函数 getStyle() 获取元素 CSS 样式
设置元素(element)的css属性值可以用element的style属性,例如要将element的背景色设置为黑色,可以这么做: element.style.backgroundColor = ' ...
随机推荐
- Charles几个常用测试功能小结
Charles应该是目前最常用的代理软件(之一),使用简单.Charles强大的抓包与协议调试代理功能可以满足我们大部分需求,居然还免费(我可没说有破解版).日常测试中,我吗常用的几个功能主要是抓取网 ...
- 2019-04-28-day042-HTML初识
GET / HTTP/1.1 Host: 127.0.0.1:9001 Upgrade-Insecure-Requests: 1 Accept: text/html,application/xhtml ...
- 2018-4-25 初识html
第一天 简单了解web 路线 html css js 发布网站 web运作 html html是超文本语言,也就是标记语言.说白了也就规定了一些符号,然后赋予这些符号意义.比如规定a就是超链接标签,用 ...
- QWaiteCondition 思考5
1: 一个QWaiteCondition(A) 和若干个QMutex(M) 协作 同步若干个QThread. 其中QWaiteCondition(A) 中存在一个列表(listmutex)保存和其协 ...
- QWaiteCondition思考3
QWaitConditioin::wait() 接收一个mutex作为参数,这个mutex应该被调用线程初始化为锁定状态.在线程进入休眠状态(waite)之前,mutex会被解锁.当线程被唤醒(Wak ...
- bug狩猎
最近需求少了,终于有时间修一下底层的bug,做一点工具方便查bug,写篇文章简单记录一下. 一是优化了一个玩法进程的启动速度.这个玩法需要用战力做匹配,玩家按战力分段放进不同的桶里,每个桶用skipl ...
- Hadoop学习笔记1 - 使用Java API访问远程hdfs集群
转载请标注原链接 http://www.cnblogs.com/xczyd/p/8570437.html 2018年3月从新司重新起航了.之前在某司过了的蛋疼三个月,也算给自己放了个小假了. 第一个小 ...
- Image Widget 的几种加入形式
image .asset : 加载资源图片,会使打包时包体过大 image.network :网络资源图片,经常换的或者动态的图片 image file : 本地图片,比如相册 重用属性: fit ...
- 构建之法 chapter1 心得
阅读完了<构建之法>第一章后,觉得我们平时使用的软件并不是自己想象中的那样简单,用的时候是觉得很方便,但从来没有考虑过一个软件的背后需要一个团队多少的付出才能换来一个获得用户频频好评的软件 ...
- Azure monitor Portal 、Azure monitor API监控指标、性能监视器常用指标