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 ...
随机推荐
- CAShapeLayer--备用
之前讲过CALayer动画相关知识,再来看看更加复杂的CAShapeLayer相关的动画知识. 普通CALayer在被初始化时是需要给一个frame值的,这个frame值一般都与给定view的boun ...
- c++函数内部可以返回函数内部定义的指针 但是不能返回函数内部定义的数组
1.返回数组 // demo.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include<stdio.h> char *m ...
- EWS小记
前段时间和同事完成了一个Exchange 2010 OWA的改造版,他狠狠的把网易邮箱抄了一把,而我则狠狠的被EWS坑了一把.今天打开项目粗略看了一下,发现很多东西都有点记不起来了,思细极恐,决定还是 ...
- Hadoop集群(第10期)_MySQL关系数据库
1.MySQL安装 MySQL下载地址:http://www.mysql.com/downloads/ 1.1 Windows平台 1)准备软件 MySQL版本:mysql-5.5.21-win32. ...
- treeview 点击时选中节点
private void tv_WebList_NodeMouseClick(object sender, TreeNodeMouseClickEventArgs e) { Point clickPo ...
- 1089-Duplicate Removal
描述 The company Al's Chocolate Mangos has a web site where visitors can guess how many chocolate cove ...
- HDU 4540 威威猫系列故事——打地鼠(DP)
点我看题目 题意 :中文题,不详述. 思路 : 状态转移方程 dp[ i ][ j ] = dp[i-1][k] + fabs(a[ i ][ j ]-a[i-1][k]) ; dp[i][j]代表的 ...
- 获取C#中exe程序的实例名
获取sanjiao.frmsanjiao string strPass = @"D:\WinAutoTest\sanjiao.exe"; Assembly assebly = As ...
- spring cloud官方文档提到的服务开发的12项要素。
I. Codebase 从一个代码库部署到多个环境. II. Dependencies 使用显式的声明隔离依赖,即模块单独运行,并可以显式管理依赖. III. Config 在系统外部存储配置信息. ...
- 如何使用MIME类型
今天在使用System.Net.WebClient做一个下载的时候,很郁闷,已经发不好的文件视频,却怎么也下载不了. 究其原因有两个, System.Net.WebClient对象的DownloadF ...