javascript获取元素CSS样式代码示例


Posted in Javascript onNovember 28, 2013

使用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)
[/code]

注:获取到的颜色属性都是以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 相关文章推荐
jquery.validate使用攻略 第二部
Jul 01 Javascript
jquery 3D 标签云示例代码
Jun 12 Javascript
jquery实现人性化的有选择性禁用鼠标右键
Jun 30 Javascript
javascript转换日期字符串为Date日期对象的方法
Feb 13 Javascript
JavaScript中exec函数用法实例分析
Jun 08 Javascript
简单谈谈node.js 版本控制 nvm和 n
Oct 15 Javascript
URL的参数中有加号传值变为空格的问题(URL特殊字符)
Nov 04 Javascript
详解Bootstrap各式各样的按钮(推荐)
Dec 13 Javascript
详解使用fetch发送post请求时的参数处理
Apr 05 Javascript
es7学习教程之Decorators(修饰器)详解
Jul 21 Javascript
EasyUI Tree树组件无限循环的解决方法
Sep 27 Javascript
js module大战
Apr 19 Javascript
浅析JavaScript中的CSS属性及命名规范
Nov 28 #Javascript
JavaScript中的连字符详解
Nov 28 #Javascript
Google (Local) Search API的简单使用介绍
Nov 28 #Javascript
jquery实现弹出窗口效果的实例代码
Nov 28 #Javascript
asm.js使用示例代码
Nov 28 #Javascript
jquery实现动态菜单的实例代码
Nov 28 #Javascript
JavaScript中的常见问题解决方法(乱码,IE缓存,代理)
Nov 28 #Javascript
You might like
php 常用字符串函数总结
2008/03/15 PHP
ThinkPHP验证码和分页实例教程
2014/08/22 PHP
php堆排序实现原理与应用方法
2015/01/03 PHP
Django 中 cookie的使用
2017/08/17 PHP
PHP使用 Imagick 扩展实现图片合成,圆角处理功能示例
2019/09/09 PHP
JavaScript 定义function的三种方式小结
2009/10/16 Javascript
遮罩层点击按钮弹出并且具有拖动和关闭效果(两种方法)
2015/08/20 Javascript
JavaScript基础篇(6)之函数表达式闭包
2015/12/11 Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
2016/03/22 Javascript
jQuery+ajax+asp.net获取Json值的方法
2016/06/08 Javascript
jQuery实现动态文字搜索功能
2017/01/05 Javascript
JS简单生成由字母数字组合随机字符串示例
2018/05/25 Javascript
JavaScript实现动态添加、移除元素或属性的方法分析
2019/01/03 Javascript
JavaScript实现网页计算器功能
2020/10/29 Javascript
[02:44]2014DOTA2 国际邀请赛中国区预选赛 大神红毯秀
2014/05/25 DOTA
Python使用新浪微博API发送微博的例子
2014/04/10 Python
从零学Python之入门(五)缩进和选择
2014/05/27 Python
python文件操作整理汇总
2014/10/21 Python
win10下python3.5.2和tensorflow安装环境搭建教程
2018/09/19 Python
python实现旋转和水平翻转的方法
2018/10/25 Python
用Python实现数据的透视表的方法
2018/11/16 Python
python opencv 读取本地视频文件 修改ffmpeg的方法
2019/01/26 Python
pandas删除指定行详解
2019/04/04 Python
代码实例讲解python3的编码问题
2019/07/08 Python
Python操作远程服务器 paramiko模块详细介绍
2019/08/07 Python
python jenkins 打包构建代码的示例代码
2019/11/29 Python
python-sys.stdout作为默认函数参数的实现
2020/02/21 Python
如何解决cmd运行python提示不是内部命令
2020/07/01 Python
详解tensorflow之过拟合问题实战
2020/11/01 Python
CSS3实现伪类hover离开时平滑过渡效果示例
2017/08/10 HTML / CSS
Strawberrynet草莓网新加坡站:护肤、彩妆、香水及美发产品
2018/08/31 全球购物
介绍下Java的输入输出流
2014/01/22 面试题
微型企业创业投资计划书
2014/01/10 职场文书
反邪教标语
2014/06/23 职场文书
学校学雷锋活动总结
2014/06/26 职场文书
nginx 多个location转发任意请求或访问静态资源文件的实现
2021/03/31 Servers