style和currentStyle和getComputedStyle获取css样式
2015-11-23 17:04
591 查看
样式表有三种方式
内嵌样式(inline Style) :是写在Tag里面的,内嵌样式只对所有的Tag有效。内部样式(internal Style Sheet):是写在HTML的里面的,内部样式只对所在的网页有效。
外部样式表(External Style Sheet):如果很多网页需要用到同样的样式(Styles),将样式(Styles)写在一个以.css为后缀的CSS文件里,然后在每个需要用到这些样式(Styles)的网页里引用这个CSS文件。 最常用的是style属性,在JavaScript中,通过document.getElementById(id).style.XXX就可以获取到XXX的值,但意外的是,这样做只能取到通过内嵌方式设置的样式值,即style属性里面设置的值。
下面做一个示例介绍
用js的style属性可以获得html标签的样式,但是不能获取非行间样式。那么怎么用js获取css的非行间样式呢?在IE下可以用currentStyle,而在火狐下面我们需要用到getComputedStyle。
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js用currentStyle和getComputedStyle获取css样式</title> <style type="text/css"> #div1{width:100px; height:100px; background:red;} </style> <script type="text/javascript"> function getStyle(obj, attr) { if(obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj,false)[attr]; } } window.onload=function() { var oDiv=document.getElementById('div1'); alert(getStyle(oDiv,'width')) } </script> </head> <body> <div id="div1"></div> </body> </html>
解决方案:引入currentStyle,runtimeStyle,getComputedStyle style 标准的样式,可能是由style属性指定的!
runtimeStyle 运行时的样式!如果与style的属性重叠,将覆盖style的属性!
currentStyle 指 style 和 runtimeStyle 的结合! 通过currentStyle就可以获取到通过内联或外部引用的CSS样式的值了(仅限IE) 如:document.getElementById("test").currentStyle.top
要兼容FF,就得需要getComputedStyle 出马了
注意: getComputedStyle是firefox中的, currentStyle是ie中的. 比如说
<style> #mydiv { width : 300px; } </style>那么
var mydiv = document.getElementById('mydiv'); if(mydiv.currentStyle) { var width = mydiv.currentStyle['width']; alert('ie:' + width); } else if(window.getComputedStyle) { var width = window.getComputedStyle(mydiv , null)['width']; alert('firefox:' + width); }还有就是FF下的获取方式
document.defaultView.getComputedStyle(mydiv,null).width; window.getComputedStyle(mydiv , null).width;
以上~
相关文章推荐
- iOS文本框样式,键盘样式,清除按钮设置,左右视图
- 一些css小用法总结
- css页面排版图片下边出现空隙解决方法
- CSS3 圆角(border-radius)
- css文字超出显示...
- 一些css小用法总结(持续更新~)
- CSS美化上传按钮并获取上传文件路径
- CSS颜色代码大全
- 引用样式属性(Referencing style attributes)?attr
- css font的简写规则
- 常用界面交替动画样式以及View动态样式
- 常用css 样式积累
- CSS 布局:40个教程、技巧、例子和最佳实践
- CSS3制作各种形状图像
- css负边距之详解
- 系统级搜索(基础应用)-CSSearchable
- CSS生成字体@font-face
- CSS Sprites,如何来规划?
- css 背景图片宽度100% 高度延y轴重复repeat-y方法
- css 背景图片宽度100% 高度延y轴重复repeat-y方法