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 相关文章推荐
jquery实现瀑布流效果分享
Mar 26 Javascript
Javascript中浮点数相乘的一个解决方法
Jun 03 Javascript
Node.js中的事件驱动编程详解
Aug 16 Javascript
javascript截取字符串小结
Apr 28 Javascript
js实现汉字排序的方法
Jul 23 Javascript
详解JavaScript函数
Dec 01 Javascript
javascript获取以及设置光标位置
Feb 16 Javascript
xmlplus组件设计系列之图标(ICON)(1)
May 05 Javascript
在vue.js中抽出公共代码的方法示例
Jun 08 Javascript
Vue中UI组件库之Vuex与虚拟服务器初识
May 07 Javascript
JavaScript使用canvas绘制随机验证码
Feb 17 Javascript
javascript中contains是否包含功能实现代码(扩展字符、数组、dom)
Apr 07 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/05/26 PHP
php 根据url自动生成缩略图并处理高并发问题
2014/01/23 PHP
php curl登陆qq后获取用户信息时证书错误
2015/02/03 PHP
php源码 fsockopen获取网页内容实例详解
2016/09/24 PHP
详解php curl带有csrf-token验证模拟提交方法
2018/04/18 PHP
php菜单/评论数据递归分级算法的实现方法
2019/08/01 PHP
javascript 类定义的4种方法
2009/09/12 Javascript
javascript for循环从入门到偏门(效率优化+奇特用法)
2012/08/01 Javascript
json格式的时间显示为正常年月日的方法
2013/09/08 Javascript
多种方法实现JS动态添加事件
2013/11/01 Javascript
javascript中通过arguments参数伪装方法重载
2014/10/08 Javascript
jquery中post方法用法实例
2014/10/21 Javascript
Jquery获取当前城市的天气信息
2016/08/05 Javascript
关于Javascript回调函数的一个妙用
2016/08/29 Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
2017/02/10 Javascript
js调用刷新界面的几种方式
2017/05/03 Javascript
详解JavaScript的BUG和错误
2018/05/07 Javascript
js图片查看器插件用法示例
2019/06/22 Javascript
layui 弹出删除确认界面的实例
2019/09/06 Javascript
vue中渲染对象中属性时显示未定义的解决
2020/07/31 Javascript
创建与框架无关的JavaScript插件
2020/12/01 Javascript
使用Pyrex来扩展和加速Python程序的教程
2015/04/13 Python
Python匹配中文的正则表达式
2016/05/11 Python
PyCharm设置护眼背景色的方法
2018/10/29 Python
python中aioysql(异步操作MySQL)的方法
2019/04/11 Python
Python 实现数据结构中的的栈队列
2019/05/16 Python
Python3多目标赋值及共享引用注意事项
2019/05/27 Python
Python利用Scrapy框架爬取豆瓣电影示例
2020/01/17 Python
英国最大的宠物食品和宠物用品网上零售商: Zooplus
2016/08/01 全球购物
市场营销求职信范文
2014/02/21 职场文书
个人承诺书格式范文
2015/04/29 职场文书
2016大学军训通讯稿
2015/11/25 职场文书
创业计划书之闲置物品置换中心
2019/12/25 职场文书
聊聊golang中多个defer的执行顺序
2021/05/08 Golang
Python实现归一化算法详情
2022/03/18 Python
TV动画「神渣☆爱豆」公开第一弹主视觉图
2022/03/21 日漫