javascript获取元素的计算样式
使用css控制页面有4种方式,分别为行内样式(内联样式)、内嵌式、链接式、导入式。
行内样式(内联样式)即写在html标签中的style属性中,如<div style="width:100px;height:100px;"></div>
内嵌样式即写在style标签中,例如<style type="text/css">div{width:100px; height:100px}</style>
链接式即为用link标签引入css文件,例如<link href="test.css" type="text/css" rel="stylesheet" />
导入式即为用import引入css文件,例如@import url("test.css")
如果想用javascript获取一个元素的样式信息,首先想到的应该是元素的style属性。但是元素的style属性仅仅代表了元素的内联样式,如果一个元素的部分样式信息写在内联样式中,一部分写在外部的css文件中,通过style属性是不能获取到元素的完整样式信息的。因此,需要使用元素的计算样式才获取元素的样式信息。
用window对象的getComputedStyle方法来获取一个元素的计算样式,此方法有2个参数,第一个参数为要获取计算样式的元素,第二个参数可以是null、空字符串、伪类(如:before,:after),这两个参数都是必需的。
来个例子,
<style type="text/css">
#testDiv{
border:1px solid red;
width: 100px;
height: 100px;
color: red;
}
</style>
<div id="testDiv"></div>
var testDiv = document.getElementById("testDiv");
var computedStyle = window.getComputedStyle(testDiv, "");
var width = computedStyle.width; //100px
var height = computedStyle.height; //100px
var color = computedStyle.color; //rgb(255, 0, 0)
注:获取到的颜色属性都是以rgb(#,#,#)格式返回的。
这个时候如果用testDiv.style来获取样式信息,如testDiv.style.width肯定是为空的。
getComputedStyle方法在IE8以及更早的版本中没有实现,但是IE中每个元素有自己的currentStyle属性。
so,来个通用的
var testDiv = document.getElementById("testDiv");
var styleInfo = window.getComputedStyle ? window.getComputedStyle(testDiv, "") : testDiv.currentStyle;
var width = styleInfo.width; //100px;
var height = styleInfo.height; //100px;
var color = styleInfo.color; // rgb(255, 0, 0)
最后要注意一点,元素的计算样式是只读的,如果想设置元素样式,还得用元素的style属性(这个才是元素style属性的真正用途所在)。
javascript获取元素的计算样式的更多相关文章
- JavaScript获取元素CSS计算后的样式
原文链接https://www.w3ctech.com/topic/40 我们在开发过程中,有时候需要根据元素已有样式来实现一些效果,那我们应该如何通过JavaScript来获取一个元素计算后的样式值 ...
- javascript获取元素样式值
使用css控制页面有4种方式,分别为行内样式(内联样式).内嵌式.链接式.导入式. 行内样式(内联样式)即写在html标签中的style属性中,如<div style="width:1 ...
- JavaScript获取元素样式
原生的JavaScript获取写在标签内部的样式很简单: <div class="test" id="test" style="width:10 ...
- javascript 获取元素样式的方法
javascript 获取元素样式常用方法. Javascript获取CSS属性值方法:getComputedStyle和currentStyle 1 .对于元素的内联CSS样式(<div s ...
- JS获得css样式即获得元素的计算样式(《Javascript精粹修订版》书摘)
为HTML文档中的元素指定样式可以有3种方法:使用内嵌样式.在页面的head中对Style进行声明以及外部 CSS 文件.元素的视觉效果往往是由上述3种方式的结合或者其中某一种方式来确定的,但是内嵌样 ...
- 详细解析 JavaScript 获取元素的坐标
引言 最近突然看到了有关图片懒加载的问题,大致意思就是初始状态下页面只加载浏览器可视区域的图片,剩余图片在当浏览器可视区域滚动到其位置时才开始加载.貌似现在许多大型网站都有实现懒加载,所以我便就此问题 ...
- JavaScript获取元素尺寸和大小操作总结
一.获取元素的行内样式 复制代码 代码如下: var obj = document.getElementById("test"); alert(obj.height + " ...
- JavaScript获取元素尺寸和大小操作总结(转载)
一.获取元素的行内样式 var obj = document.getElementById("test"); alert(obj.height + "\n" + ...
- 原生js获取元素非行内样式属性的方法
获取当前对象的样式DOM标准中的全局方法 getComputedStyle(obj).width (获取元素的宽度),但在非标准IE浏览器(IE8)以下有兼容问题IE8以下要这样写 obj.curre ...
随机推荐
- Temporary Post Used For Theme Detection (da655c32-bc15-41ad-bf89-e76c1ec1bea7 - 3bfe001a-32de-4114-a6b4-4005b770f6d7)
This is a temporary post that was not deleted. Please delete this manually. (997facfe-d420-4437-a222 ...
- bp神经网络算法
对于BP神经网络算法,由于之前一直没有应用到项目中,今日偶然之时 进行了学习, 这个算法的基本思路是这样的:不断地迭代优化网络权值,使得输入与输出之间的映射关系与所期望的映射关系一致,利用梯度下降的方 ...
- linux 查看各服务状态chkconfig
使用chkconfig 查看服务状态启动状态chkconfig --list 查看服务状态chkconfig --del <service name> 删除掉某项服务.在Fedora14中 ...
- BZOJ 4029 [HEOI 4029] 定价 解题报告
这个题好像也是贪心的感觉.. 我们枚举 $1,5,10,50,100,\dots$ ,找出在 $[l, r]$ 内能整除它们的最小的数. 然后找到其中在荒谬值最小的情况下数值最小的那个数, 就做完了. ...
- A Full Hardware Guide to Deep Learning
A Full Hardware Guide to Deep Learning Deep Learning is very computationally intensive, so you will ...
- Ubuntu下与菜单和图标相关的几个文件夹
转自UBUNTU下与菜单和图标相关的几个文件夹 /usr/share/icons 系统图标文件夹 /usr/share/applications 系统菜单文件夹,要在左上角的应用程序菜单中添加一项 ...
- 数据库里面DataTime时间类型字段,如果为null时
tran.TransactionTime = bet.CreationDate.ToString() == "0001/1/1 0:00:00" ? DateTime.Now : ...
- android ExpandableListActivity的使用
package com.example.keKuoZhanLieBiao; import android.app.ExpandableListActivity; import android.os.B ...
- windows 安装mysql的时候最后执行一直停留在Write configuration file
出现原因:MySQL安装路径出现中文,特殊字符.或是重新安装MySQL后经常遇到.前者是路径不允许出现中文名称,后者是由于卸载不干净. 我就是因为重新安装了MySQL,卸载不干净,才会导致之后这个错误 ...
- JAVA 字符串编码总结
java 为了解决跨平台,字符串编码的有点特殊 String newStr = new String(oldStr.getBytes(), "UTF-8");java中的Strin ...