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之折叠面板的深入解析
Jun 19 Javascript
JQuery自动触发事件的方法
Jun 13 Javascript
使用vue.js实现checkbox的全选和多个的删除功能
Feb 17 Javascript
使用react-router4.0实现重定向和404功能的方法
Aug 28 Javascript
微信小程序progress组件使用详解
Jan 31 Javascript
使用ng-packagr打包Angular的方法示例
Sep 21 Javascript
nuxt中使用路由守卫的方法步骤
Jan 27 Javascript
Node.js如何对SQLite的async/await封装详解
Feb 14 Javascript
微信小程序 腾讯地图SDK 获取当前地址实现解析
Aug 12 Javascript
d3.js实现图形拖拽
Dec 19 Javascript
使用preload预加载页面资源时注意事项
Feb 03 Javascript
Vue router传递参数并解决刷新页面参数丢失问题
Dec 02 Vue.js
浅析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
第十一节--重载
2006/11/16 PHP
PHP中变量引用与变量销毁机制分析
2014/11/15 PHP
php实现图片上传并进行替换操作
2016/03/15 PHP
php+redis实现消息队列功能示例
2019/09/19 PHP
javascript 写类方式之六
2009/07/05 Javascript
js或css文件后面跟参数的原因说明
2010/01/09 Javascript
jQuery下通过$.browser来判断浏览器.
2011/04/05 Javascript
JqGrid web打印实现代码
2011/05/31 Javascript
把jquery 的dialog和ztree结合实现步骤
2013/08/02 Javascript
jQuery前端框架easyui使用Dialog时bug处理
2014/12/05 Javascript
使用Jquery实现每日签到功能
2015/04/03 Javascript
js简单倒计时实现代码
2016/04/30 Javascript
JS跨域请求外部服务器的资源
2017/02/06 Javascript
基于pako.js实现gzip的压缩和解压功能示例
2017/06/13 Javascript
详解angular 中的自定义指令之详解API
2017/06/20 Javascript
浅谈vue+webpack项目调试方法步骤
2017/09/11 Javascript
浅谈VUE监听窗口变化事件的问题
2018/02/24 Javascript
Vue中使用vue-i18插件实现多语言切换功能
2018/04/25 Javascript
ES6的解构赋值实例详解
2019/05/06 Javascript
nodejs中各种加密算法的实现详解
2019/07/11 NodeJs
详解基于Wepy开发小程序插件(推荐)
2019/08/01 Javascript
package.json中homepage属性的作用详解
2020/03/11 Javascript
Python基于ThreadingTCPServer创建多线程代理的方法示例
2018/01/11 Python
python3 遍历删除特定后缀名文件的方法
2018/04/23 Python
Python基于pandas实现json格式转换成dataframe的方法
2018/06/22 Python
python读写LMDB文件的方法
2018/07/02 Python
numpy库与pandas库axis=0,axis= 1轴的用法详解
2019/05/27 Python
Python实现微信表情包炸群功能
2021/01/28 Python
Bodum官网:咖啡和茶壶、玻璃器皿、厨房电器等
2018/08/01 全球购物
大唐电信科技股份有限公司java工程师面试经历
2016/12/09 面试题
委托代理人授权委托书范本
2014/09/24 职场文书
2015年度高中教师工作总结
2015/05/26 职场文书
珍爱生命主题班会
2015/08/13 职场文书
小学班级口号大全
2015/12/25 职场文书
浅谈哪个Python库才最适合做数据可视化
2021/06/28 Python
Python  lambda匿名函数和三元运算符
2022/04/19 Python