获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)


Posted in Javascript onFebruary 14, 2011

可是DOM.style这种写法只能访问<DOM style=""></DOM>,这样在标签里内置的样式,如果样式写在<style type="text/css"></style>,或者.css文件里,那么就办法读到样式了。

其实呢,还有别的方法可以读到这些样式信息,方法有两种,一种是通过document.styleSheets对象,另一种是通过“最终样式”对象。其中 IE中这个对象叫做currentStyle,FF中这个对象叫做document.defaultView。我将这两个类打包了一下,做了一个用于访问 样式信息的函数,如下:

//===========================访问样式表函数==================================== 
function returnStyle(obj,styleName){ 
var myObj = typeof obj == "string" ? document.getElementById(obj) : obj; 
if(document.all){ 
return eval("myObj.currentStyle." + styleName); 
} else { 
return eval("document.defaultView.getComputedStyle(myObj,null)." + styleName); 
} 
}

函数有两个参数:

obj:访问的对象,类型为DOM对象,或者是对象的id;

styleName: 需要访问的样式名称。类型为string,但是名称不能用"-"号,要用像style.对象的属性名一样的大小写混写名称,例如background-color要写成backgroundColor。

函数返回值为 string类型。

注意:这个方法只能访问样式文件,不能写。如果要写样式,还是要用DOM.style.XXX的方法。另外,FF下有些样式访问有问题,例如padding,margin。如果样式中设置了padding,margin等值,我们可以用marginLeft来返回值。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<style type="text/css"> 
#demo{background-color:#000;padding:10px;color:#fff;width:200px;} 
</style> 
<script type="text/javascript"> 
//===========================访问样式表==================================== 
function returnStyle(obj,styleName){ 
var myObj = typeof obj == "string" ? document.getElementById(obj) : obj; 
if(document.all){ 
return eval("myObj.currentStyle." + styleName); 
} else { 
return eval("document.defaultView.getComputedStyle(myObj,null)." + styleName); 
} 
} 
</script> 
<title></title> 
</head> 
<body> 
<div id="demo">这里是测试内容</div> 
<br /><br /> 
<a href="###" onclick="alert(returnStyle('demo','width'));">点击测试</a> 
</body> 
</html>

===========================
function getStyle( elem, name ) { 
//如果该属性存在于style[]中,则它最近被设置过(且就是当前的) 
if (elem.style[name]) 
return elem.style[name]; 
//否则,尝试IE的方式 
else if (elem.currentStyle) 
return elem.currentStyle[name]; 
//或者W3C的方法,如果存在的话 
else if (document.defaultView && document.defaultView.getComputedStyle) { 
//它使用传统的"text-Align"风格的规则书写方式,而不是"textAlign" 
name = name.replace(/([A-Z])/g,"-$1"); 
name = name.toLowerCase(); 
//获取style对象并取得属性的值(如果存在的话) 
var s = document.defaultView.getComputedStyle(elem,""); 
return s && s.getPropertyValue(name); 
//否则,就是在使用其它的浏览器 
} else 
return null; 
}
Javascript 相关文章推荐
让广告代码不再影响你的网页加载速度
Jul 07 Javascript
JS给超链接加确认对话框的方法
Feb 24 Javascript
JavaScript中实现键值对应的字典与哈希表结构的示例
Jun 12 Javascript
JavaScript“尽快失败”的原则实例详解
Oct 08 Javascript
适用于手机端的jQuery图片滑块动画
Dec 09 Javascript
bootstrapValidator 重新启用提交按钮的方法
Feb 20 Javascript
详解闭包解决jQuery中AJAX的外部变量问题
Feb 22 Javascript
JavaScript实现HTML5游戏断线自动重连的方法
Sep 18 Javascript
在vue中更换字体,本地存储字体非引用在线字体库的方法
Sep 28 Javascript
微信小程序扫描二维码获取信息实例详解
May 07 Javascript
JS新手入门数组处理的实用方法汇总
Apr 07 Javascript
一篇文章弄清楚Ajax请求的五个步骤
Mar 17 Javascript
JavaScript与Image加载事件(onload)、加载状态(complete)
Feb 14 #Javascript
JQuery 选择器、过滤器介绍
Feb 14 #Javascript
AJAX分页的代码(后台asp.net)
Feb 14 #Javascript
基于jquery的图片的切换(以数字的形式)
Feb 14 #Javascript
jquery isType() 类型判断代码
Feb 14 #Javascript
jquery isEmptyObject判断是否为空对象的函数
Feb 14 #Javascript
jquery each()源代码
Feb 14 #Javascript
You might like
PHP Array交叉表实现代码
2010/08/05 PHP
PHP笔记之:日期函数的使用介绍
2013/04/24 PHP
zf框架的registry(注册表)使用示例
2014/03/13 PHP
php面向对象与面向过程两种方法给图片添加文字水印
2015/08/26 PHP
详解php用curl调用接口方法,get和post两种方式
2017/01/13 PHP
yii框架结合charjs实现统计30天数据的方法
2020/04/04 PHP
jquery与google map api结合使用 控件,监听器
2010/03/04 Javascript
教你如何自定义百度分享插件以及bshare分享插件的分享按钮
2014/06/20 Javascript
js简单工厂模式用法实例
2015/06/30 Javascript
BootstrapValidator超详细教程(推荐)
2016/12/07 Javascript
基于jQuery代码实现圆形菜单展开收缩效果
2017/02/13 Javascript
js实现手机发送验证码功能
2017/03/13 Javascript
AngularJS中下拉框的高级用法示例
2017/10/11 Javascript
从源码看angular/material2 中 dialog模块的实现方法
2017/10/18 Javascript
深入理解vue-class-component源码阅读
2019/02/18 Javascript
vue实现一拉到底的滑动验证
2019/07/25 Javascript
使用layui前端框架弹出form表单以及提交的示例
2019/10/25 Javascript
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
2020/07/20 Javascript
[57:59]完美世界DOTA2联赛循环赛 Ink Ice vs LBZS BO2第一场 11.05
2020/11/05 DOTA
Python实现嵌套列表去重方法示例
2017/12/28 Python
pyqt远程批量执行Linux命令程序的方法
2019/02/14 Python
详解Python计算机视觉 图像扭曲(仿射扭曲)
2019/03/27 Python
pandas计数 value_counts()的使用
2019/06/24 Python
详解Python 多线程 Timer定时器/延迟执行、Event事件
2019/06/27 Python
Linux下通过python获取本机ip方法示例
2019/09/06 Python
Python类反射机制使用实例解析
2019/12/30 Python
基于Python中random.sample()的替代方案
2020/05/23 Python
使用CSS3美化HTML表单的技巧演示
2016/05/17 HTML / CSS
80年代复古T恤:TruffleShuffle
2018/07/02 全球购物
意大利网上书店:LaFeltrinelli
2020/06/12 全球购物
实习生体会的自我评价范文
2013/11/28 职场文书
银行存款证明样本
2014/01/17 职场文书
优秀乡村医生先进事迹材料
2014/08/23 职场文书
专业技术职务聘任证明
2015/03/02 职场文书
matplotlib之pyplot模块实现添加子图subplot的使用
2021/04/25 Python
Nginx静态压缩和代码压缩提高访问速度详解
2022/05/30 Servers