获取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 相关文章推荐
JS获取各种浏览器窗口大小的方法
Jan 14 Javascript
jquery重复提交请求的原因浅析
May 23 Javascript
jQuery unbind 删除绑定事件详解
May 24 Javascript
解析JavaScript实现DDoS攻击原理与保护措施
Dec 26 Javascript
详解JavaScript数组过滤相同元素的5种方法
May 23 Javascript
jquery网页加载进度条的实现
Jun 01 jQuery
微信小程序slider组件使用详解
Jan 31 Javascript
详解Vue2.0配置mint-ui踩过的那些坑
Apr 23 Javascript
详解Angular5 路由传参的3种方法
Apr 28 Javascript
vue router带参数页面刷新或回退参数消失的解决方法
Feb 27 Javascript
js JSON.stringify()基础详解
Jun 19 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
Feb 28 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
在JavaScript中调用php程序
2009/03/09 PHP
php的一个简单加密解密代码
2014/01/14 PHP
ThinkPHP行为扩展Behavior应用实例详解
2014/07/22 PHP
php cookie用户登录的详解及实例代码
2017/01/03 PHP
Yii框架通过请求组件处理get,post请求的方法分析
2019/09/03 PHP
javascript 内存回收机制理解
2011/01/17 Javascript
jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable示例代码打包
2011/04/06 Javascript
javascript实现依次输入input自动定焦
2014/12/23 Javascript
基于javascript代码检测访问网页的浏览器呈现引擎、平台、Windows操作系统、移动设备和游戏系统
2015/12/03 Javascript
Bootstrap每天必学之导航组件
2016/04/25 Javascript
简单谈谈axios中的get,post方法
2017/06/25 Javascript
ionic2屏幕适配实现适配手机、平板等设备的示例代码
2017/08/11 Javascript
vue服务端渲染添加缓存的方法
2018/09/18 Javascript
Nodejs监控事件循环异常示例详解
2019/09/22 NodeJs
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
2019/09/28 Javascript
详解Vue template 如何支持多个根结点
2020/02/10 Javascript
Vue.js实现立体计算器
2020/02/22 Javascript
js HTML DOM EventListener功能与用法实例分析
2020/04/27 Javascript
JS数组Reduce方法功能与用法实例详解
2020/04/29 Javascript
[40:17]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第一场
2018/04/06 DOTA
浅谈python中requests模块导入的问题
2018/05/18 Python
python中字符串内置函数的用法总结
2018/09/13 Python
对python的输出和输出格式详解
2018/12/08 Python
django和vue实现数据交互的方法
2019/08/21 Python
Python 中的pygame安装与配置教程详解
2020/02/10 Python
什么是python的列表推导式
2020/05/26 Python
django的autoreload机制实现
2020/06/03 Python
Python读取图像并显示灰度图的实现
2020/12/01 Python
微信html5页面调用第三方位置导航的示例
2018/03/14 HTML / CSS
澳大利亚家具商店:Freedom
2020/12/17 全球购物
简历中个人求职的自我评价模板
2013/11/29 职场文书
单位单身证明范本
2014/01/11 职场文书
银行文明优质服务培训心得体会
2016/01/09 职场文书
使用tensorflow 实现反向传播求导
2021/05/26 Python
Java实现给Word文件添加文字水印
2022/02/15 Java/Android
Win2008系统搭建DHCP服务器
2022/06/25 Servers