js正确获取元素样式详解


Posted in Javascript onAugust 07, 2009

在说js获取元素样式之前,简单地谈一下样式

样式分三种
外部样式 External Style Sheet
以CSS为扩展名的文件(又称为"超文本样式表"文件),它的作用范围可以是多张网页,或整个网站,甚至不同的网站。与网页链接后,才能应用。
嵌入式样式 internal Style Sheet
包含在网页内部的样式设置,它的作用范围仅限于嵌入的网页。
内联式样式 inline Style
在HTML文档中,内联式样式表的格式化信息直接插入所应用的网页元素的HTML标签中,作为其HTML标签的属性参数。严格地说,内联样式表称不上表,仅仅是一条HTML标记。
当出现相同的样式时,优先级是内联大于嵌入式样式, 嵌入式样式大于外部样式。
---------------------------------------------------------------
当js获取这三种样式时,style只能获取内联样式,获取不到外部样式和嵌入式样式,因此要用currentStyle属性,而currentStyle在FF下不支持
下面介绍二种 兼容FF和IE和正确获取样式的方法

var $=function(id){return document.getElementById(id) }; 
方法一 
/* 
* @string id 
* @string styleName 样式名 
*/ 
function getEyeJsStyle(id,styleName){ 
if($(id).currentStyle){//ie 
return $(id).currentStyle[styleName]; 
}else{ //ff 
var $arr=$(id).ownerDocument.defaultView.getComputedStyle($(id), null); 
return $arr[styleName]; 
} 
}

方法二:
HTMLElement.prototype.__defineGetter__("currentStyle", function () { 
return this.ownerDocument.defaultView.getComputedStyle(this, null); 
});

讲述一下getComputedStyle函数的用法
这个函数有两个参数:
第一个参数为需要获取样式的元素对象;
第二个参数为伪元素,如:hover, :first-letter, :before等等,
如果不需要伪元素则该参数为null。
getComputedStyle()函数可以从 document.defaultView 对象中访问到,即可以这样调用该函数
--------------------------------------------------------------------------------------------

顺便说一下runtimeStyle属性,首页该属性只在IE中支持,在FF不支持
runtimeStyle 运行时的样式!如果与style的属性重叠,将覆盖style的属性!
意思就是当指定了runtimeStyle,那么当前显示的样式以runtimeStyle为准,如果取消了runtimeStyle,那么当前显示样式就恢复到currentStyle的样式。
案例:
设置document.getElementById("eyejs").runtimeStyle.width="400px"; 那该元素的宽度就是400px,,将覆盖style的属性
案例分析打包下载

Javascript 相关文章推荐
Javascript实现的分页函数
Feb 07 Javascript
JavaScript 应用类库代码
Jun 02 Javascript
一个简单的网站访问JS计数器 刷新1次加1次访问
Sep 20 Javascript
一段非常简单的js判断浏览器的内核
Aug 17 Javascript
jquery实现简单的自动播放幻灯片效果
Jun 13 Javascript
深入理解javascript的getTime()方法
Feb 16 Javascript
Bootstrap模态框案例解析
Mar 05 Javascript
详解angular用$sce服务来过滤HTML标签
Apr 11 Javascript
ajax前台后台跨域请求处理方式
Feb 08 Javascript
Vue源码解析之数组变异的实现
Dec 04 Javascript
es6基础学习之解构赋值
Dec 10 Javascript
基于Nuxt.js项目的服务端性能优化与错误检测(容错处理)
Oct 23 Javascript
JavaScript 乱码问题
Aug 06 #Javascript
jquery ui dialog里调用datepicker的问题
Aug 06 #Javascript
jquery select(列表)的操作(取值/赋值)
Aug 06 #Javascript
asp(javascript)全角半角转换代码 dbc2sbc
Aug 06 #Javascript
javascript Array.remove() 数组删除
Aug 06 #Javascript
实现连缀调用的map方法(prototype)
Aug 05 #Javascript
Extjs ajax同步请求时post方式参数发送方式
Aug 05 #Javascript
You might like
php的字符串用法小结
2010/06/08 PHP
php设计模式  Command(命令模式)
2011/06/17 PHP
PHP二维数组去重算法
2016/12/17 PHP
yii2简单使用less代替css示例
2017/03/10 PHP
php+ajax实现异步上传文件或图片功能
2017/07/18 PHP
thinkphp3.2.0 setInc方法 源码全面解析
2018/01/29 PHP
一个js实现的所谓的滑动门
2007/05/23 Javascript
javascript 图片上传预览-兼容标准
2009/06/01 Javascript
jquery(hide方法)隐藏指定元素实例
2013/11/11 Javascript
一个很有趣3D球状标签云兼容IE8
2014/08/22 Javascript
javascript三元运算符用法实例
2015/04/16 Javascript
Function.prototype.apply()与Function.prototype.call()小结
2016/04/27 Javascript
卸载安装Node.js与npm过程详解
2016/08/15 Javascript
AngularJS指令与控制器之间的交互功能示例
2016/12/14 Javascript
利用Mongoose让JSON数据直接插入或更新到MongoDB
2017/05/03 Javascript
jQuery实现的文字逐行向上间歇滚动效果示例
2017/09/06 jQuery
es6基础学习之解构赋值
2018/12/10 Javascript
发布订阅模式在vue中的实际运用实例详解
2019/06/09 Javascript
js实现登录拖拽窗口
2020/02/10 Javascript
详细分析vue响应式原理
2020/06/22 Javascript
JS中锚点链接点击平滑滚动并自由调整到顶部位置
2021/02/06 Javascript
python中正则表达式的使用详解
2014/10/17 Python
python编写的最短路径算法
2015/03/25 Python
Django Admin实现上传图片校验功能
2016/03/06 Python
通过Pandas读取大文件的实例
2018/06/07 Python
关于ZeroMQ 三种模式python3实现方式
2019/12/23 Python
对Keras中predict()方法和predict_classes()方法的区别说明
2020/06/09 Python
HTML5 语音搜索只需一句代码
2013/01/03 HTML / CSS
中专药剂专业应届毕的自我评价
2013/12/27 职场文书
施工材料员岗位职责
2014/02/12 职场文书
生日宴会主持词
2014/03/20 职场文书
科技工作者先进事迹
2014/08/16 职场文书
领导干部群众路线教育实践活动剖析材料
2014/10/10 职场文书
个人批评与自我批评
2014/10/15 职场文书
Redis 中使用 list,streams,pub/sub 几种方式实现消息队列的问题
2022/03/16 Redis
彩虹社八名人气艺人全新周边限时推出,性转女装男装一次拥有!
2022/04/01 日漫