getComputedStyle()用法详解
那如果元素即没有在style属性中设置宽高,也没有在样式表中设置宽高,还能用getComputedStyle或currentStyle获取吗?答案是getComputedStyle可以,currentStyle不可以 。
实际项目中,可能要获取元素的CSS样式属性值,然后再进行其他的操作。
在操作中可能会遇到这种情况,有时候能够正确获取CSS属性值,有时候则不能。
下面通过代码实例分析一下出现这种问题的原因,以及解决方案。
首先看一段代码实例:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>getComputedStyle使用</title>
<style type="text/css">
div{
width:100px;
height:100px;
margin-top:20px;
}
#first{background-color:red}
</style>
<script type="text/javascript">
window.onload=function(){
var first=document.getElementById("first");
var second=document.getElementById("second");
alert(first.style.backgroundColor);
alert(second.style.backgroundColor);
}
</script>
</head>
<body>
<div id="first"></div>
<div id="second" style="background-color:blue"></div>
</body>
</html>
代码运行后,顺利弹出第二个div的背景颜色,第一个的没有获取到。
不少初学者一开始可能人为dom元素对象的style属性无所不能,不但能设置元素的样式,也能够获取到对应的样式,但它不是万能的,它只能够获取通过style设置的元素CSS属性值:
(1).style内签到HTML标签内设置。
(2).dom.style.width="100px"这样类似设置。
这时getComputedStyle方法的作用就得以体现,它可以获取指定元素对应CSS属性的最终计算值。
语法结构:
window.getComputedStyle(element, [pseudoElt])
参数解析:
(1).element:必需,要获取样式值的元素对象。
(2).pseudoElt:可选,表示指定节点的伪元素(:before、:after、:first-line、:first-letter等)。
浏览器支持:
(1).IE9+浏览器支持此方法。
(2).edge浏览器支持此方法。
(3).谷歌浏览器支持此方法。
(4).opera浏览器支持此方法。
(5).火狐浏览器支持此方法。
(6).safria浏览器支持此方法。
代码实例:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>getComputedStyle使用</title>
<style type="text/css">
div{
width:100px;
height:100px;
margin-top:20px;
}
#first{background-color:red}
</style>
<script type="text/javascript">
window.onload=function(){
var first=document.getElementById("first");
var second=document.getElementById("second");
alert(window.getComputedStyle(first,null).backgroundColor);
alert(second.style.backgroundColor);
}
</script>
</head>
<body>
<div id="first"></div>
<div id="second" style="background-color:blue"></div>
</body>
</html>
以上代码成功的获取了第一个div的背景颜色。
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>getComputedStyle使用</title>
<style type="text/css">
div{
width:100px;
height:100px;
margin-top:20px;
}
#first{background-color:red}
#first::before{
content:"添加的内容";
color:#0000ff;
}
</style>
<script type="text/javascript">
window.onload=function(){
var first=document.getElementById("first");
var second=document.getElementById("second");
alert(window.getComputedStyle(first,":before").color);
}
</script>
</head>
<body>
<div id="first"></div>
<div id="second" style="background-color:blue"></div>
</body>
</html>
以上代码可以获取伪元素中字体颜色值(颜色会被转换成RGB或者RGBA模式)。
不能直接获取复合属性值,例如padding属性的值,只能读paddingLeft、paddingTop等属性。
getComputedStyle()用法详解的更多相关文章
- C#中string.format用法详解
C#中string.format用法详解 本文实例总结了C#中string.format用法.分享给大家供大家参考.具体分析如下: String.Format 方法的几种定义: String.Form ...
- @RequestMapping 用法详解之地址映射
@RequestMapping 用法详解之地址映射 引言: 前段时间项目中用到了RESTful模式来开发程序,但是当用POST.PUT模式提交数据时,发现服务器端接受不到提交的数据(服务器端参数绑定没 ...
- linux管道命令grep命令参数及用法详解---附使用案例|grep
功能说明:查找文件里符合条件的字符串. 语 法:grep [-abcEFGhHilLnqrsvVwxy][-A<显示列数>][-B<显示列数>][-C<显示列数>] ...
- mysql中event的用法详解
一.基本概念mysql5.1版本开始引进event概念.event既“时间触发器”,与triggers的事件触发不同,event类似与linux crontab计划任务,用于时间触发.通过单独或调用存 ...
- CSS中伪类及伪元素用法详解
CSS中伪类及伪元素用法详解 伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的 ...
- c++中vector的用法详解
c++中vector的用法详解 vector(向量): C++中的一种数据结构,确切的说是一个类.它相当于一个动态的数组,当程序员无法知道自己需要的数组的规模多大时,用其来解决问题可以达到最大节约空间 ...
- AngularJS select中ngOptions用法详解
AngularJS select中ngOptions用法详解 一.用法 ngOption针对不同类型的数据源有不同的用法,主要体现在数组和对象上. 数组: label for value in a ...
- systemctl命令用法详解
systemctl命令用法详解系统环境:Fedora 16binpath:/bin/systemctlpackage:systemd-units systemctl enable httpd.serv ...
- CSS3的@keyframes用法详解:
CSS3的@keyframes用法详解:此属性与animation属性是密切相关的,关于animation属性可以参阅CSS3的animation属性用法详解一章节. 一.基本知识:keyframes ...
随机推荐
- P1880 [NOI1995]石子合并(区间DP)
题目链接:https://www.luogu.org/problemnew/show/P1880 题目大意:中文题目 具体思路:和上一篇的思路是差不多的,也是对于每一个小的区间进行处理,然后再归并到大 ...
- mysql 原理 ~ DDL之mdl锁
一 简介: MDL锁 二 具体 1 MDL锁 1 增删查改 申请MDL读锁 2 ddl语句 1. 拿MDL写锁 2. 降级成MDL读锁 3. 真正做DDL ...
- C# 如何进行图像的压缩
从网上找的非常有效.图片3M到500k private static ImageCodecInfo GetEncoderInfo(String mimeType) { int j; ImageCode ...
- Redis主从哨兵和集群搭建
主从配置 哨兵配置 集群配置 1.主从: 国王和丞相,国王权力大(读写),丞相权利小(读) 2.哨兵: 国王和王子,国王死了(主服务挂掉),王子继位(从服务变主服务) 3.集群: 国王和国王,一个国王 ...
- [转]python中的正则表达式(re模块)
转自:https://www.cnblogs.com/tina-python/p/5508402.html 一.简介 正则表达式本身是一种小型的.高度专业化的编程语言,而在python中,通过内嵌集成 ...
- 不允许lseek文件 | nonseekable_open()【转】
转自:https://blog.csdn.net/gongmin856/article/details/8273545 使用数据区时,可以使用 lseek 来往上往下地定位数据.但像串口或键盘一类设备 ...
- python3+selenium入门13-操作cookie
可以把cookie理解为自己账户的身份证.因为http协议是无状态的,上一个请求和下一个请求没有关系.但是有时需要有关联.比如登录之后,才能进行操作这样的设置.这个就是cookie在起作用.登录成功时 ...
- codeforces 161D Distance in Tree 树上点分治
链接:https://codeforces.com/contest/161/problem/D 题意:给一个树,求距离恰好为$k$的点对是多少 题解:对于一个树,距离为$k$的点对要么经过根节点,要么 ...
- Unity3D之IOS&Android收集Log文件
开发项目的时候尤其在处理与服务器交互这块,如果服务端程序看不到客户端请求的Log信息,那么无法修改BUG.在Windows上Unity会自动讲Log文件写入本地,但是在IOS和Android上确没有这 ...
- python beautifulsoup爬虫学习
BeautifulSoup(page_html, "lxml").select(),这里可以通过浏览器开发者模式选择copy selector,并且并不需要完整路径. github ...