使用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获取元素的计算样式的更多相关文章

  1. JavaScript获取元素CSS计算后的样式

    原文链接https://www.w3ctech.com/topic/40 我们在开发过程中,有时候需要根据元素已有样式来实现一些效果,那我们应该如何通过JavaScript来获取一个元素计算后的样式值 ...

  2. javascript获取元素样式值

    使用css控制页面有4种方式,分别为行内样式(内联样式).内嵌式.链接式.导入式. 行内样式(内联样式)即写在html标签中的style属性中,如<div style="width:1 ...

  3. JavaScript获取元素样式

    原生的JavaScript获取写在标签内部的样式很简单: <div class="test" id="test" style="width:10 ...

  4. javascript 获取元素样式的方法

    javascript 获取元素样式常用方法. Javascript获取CSS属性值方法:getComputedStyle和currentStyle  1 .对于元素的内联CSS样式(<div s ...

  5. JS获得css样式即获得元素的计算样式(《Javascript精粹修订版》书摘)

    为HTML文档中的元素指定样式可以有3种方法:使用内嵌样式.在页面的head中对Style进行声明以及外部 CSS 文件.元素的视觉效果往往是由上述3种方式的结合或者其中某一种方式来确定的,但是内嵌样 ...

  6. 详细解析 JavaScript 获取元素的坐标

    引言 最近突然看到了有关图片懒加载的问题,大致意思就是初始状态下页面只加载浏览器可视区域的图片,剩余图片在当浏览器可视区域滚动到其位置时才开始加载.貌似现在许多大型网站都有实现懒加载,所以我便就此问题 ...

  7. JavaScript获取元素尺寸和大小操作总结

    一.获取元素的行内样式 复制代码 代码如下: var obj = document.getElementById("test"); alert(obj.height + " ...

  8. JavaScript获取元素尺寸和大小操作总结(转载)

    一.获取元素的行内样式 var obj = document.getElementById("test"); alert(obj.height + "\n" + ...

  9. 原生js获取元素非行内样式属性的方法

    获取当前对象的样式DOM标准中的全局方法 getComputedStyle(obj).width (获取元素的宽度),但在非标准IE浏览器(IE8)以下有兼容问题IE8以下要这样写 obj.curre ...

随机推荐

  1. 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 ...

  2. bp神经网络算法

    对于BP神经网络算法,由于之前一直没有应用到项目中,今日偶然之时 进行了学习, 这个算法的基本思路是这样的:不断地迭代优化网络权值,使得输入与输出之间的映射关系与所期望的映射关系一致,利用梯度下降的方 ...

  3. linux 查看各服务状态chkconfig

    使用chkconfig 查看服务状态启动状态chkconfig --list 查看服务状态chkconfig --del <service name> 删除掉某项服务.在Fedora14中 ...

  4. BZOJ 4029 [HEOI 4029] 定价 解题报告

    这个题好像也是贪心的感觉.. 我们枚举 $1,5,10,50,100,\dots$ ,找出在 $[l, r]$ 内能整除它们的最小的数. 然后找到其中在荒谬值最小的情况下数值最小的那个数, 就做完了. ...

  5. A Full Hardware Guide to Deep Learning

    A Full Hardware Guide to Deep Learning Deep Learning is very computationally intensive, so you will ...

  6. Ubuntu下与菜单和图标相关的几个文件夹

    转自UBUNTU下与菜单和图标相关的几个文件夹 /usr/share/icons  系统图标文件夹 /usr/share/applications  系统菜单文件夹,要在左上角的应用程序菜单中添加一项 ...

  7. 数据库里面DataTime时间类型字段,如果为null时

    tran.TransactionTime = bet.CreationDate.ToString() == "0001/1/1 0:00:00" ? DateTime.Now : ...

  8. android ExpandableListActivity的使用

    package com.example.keKuoZhanLieBiao; import android.app.ExpandableListActivity; import android.os.B ...

  9. windows 安装mysql的时候最后执行一直停留在Write configuration file

    出现原因:MySQL安装路径出现中文,特殊字符.或是重新安装MySQL后经常遇到.前者是路径不允许出现中文名称,后者是由于卸载不干净. 我就是因为重新安装了MySQL,卸载不干净,才会导致之后这个错误 ...

  10. JAVA 字符串编码总结

    java 为了解决跨平台,字符串编码的有点特殊 String newStr = new String(oldStr.getBytes(), "UTF-8");java中的Strin ...