获取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中将多个语句写成一个语句的两种方法小结
Dec 08 Javascript
两种JS实现屏蔽鼠标右键的方法
Aug 20 Javascript
jquery+CSS实现的水平布局多级网页菜单效果
Aug 24 Javascript
jquery分隔Url的param方法(推荐)
May 25 Javascript
jQuery实现移动端Tab选项卡效果
Mar 15 Javascript
vue 文件目录结构详解
Nov 24 Javascript
web前端页面生成exe可执行文件的方法
Feb 08 Javascript
vue和webpack安装命令详解
Jun 15 Javascript
小程序实现列表点赞功能
Nov 02 Javascript
Vue render函数实战之实现tabs选项卡组件
Apr 22 Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
Nov 09 Javascript
v-slot和slot、slot-scope之间相互替换实例
Sep 04 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
phpmyadmin操作流程
2006/10/09 PHP
关于PHP session 存储方式的详细介绍
2013/06/25 PHP
解析php mysql 事务处理回滚操作(附实例)
2013/08/05 PHP
Yii实现简单分页的方法
2016/04/29 PHP
php+js实现百度地图多点标注的方法
2016/11/30 PHP
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
2010/05/22 Javascript
基于jQuery的Tab选项框效果代码(插件)
2011/03/01 Javascript
javascript数字格式化通用类 accounting.js使用
2012/08/24 Javascript
JS实现仿百度输入框自动匹配功能的示例代码
2014/02/19 Javascript
js设置文本框中焦点位置在最后的示例代码(简单实用)
2014/03/04 Javascript
20条学习javascript的编程规范的建议
2014/11/28 Javascript
弹出遮罩层后禁止滚动效果【实现代码】
2016/04/29 Javascript
express+mockjs实现模拟后台数据发送功能
2018/01/07 Javascript
记React connect的几种写法(小结)
2018/09/18 Javascript
react实现同页面三级跳转路由布局
2019/09/26 Javascript
python实现倒计时的示例
2014/02/14 Python
Python获取Linux系统下的本机IP地址代码分享
2014/11/07 Python
完美解决python中ndarray 默认用科学计数法显示的问题
2018/07/14 Python
解决pycharm 工具栏Tool中找不到Run manager.py Task的问题
2019/07/01 Python
Python之修改图片像素值的方法
2019/07/03 Python
tensorflow实现二维平面模拟三维数据教程
2020/02/11 Python
Django配置跨域并开发测试接口
2020/11/04 Python
python Timer 类使用介绍
2020/12/28 Python
用Python自动清理电脑内重复文件,只要10行代码(自动脚本)
2021/01/09 Python
HTML+CSS3+JS 实现的下拉菜单
2020/11/25 HTML / CSS
一套C#面试题
2013/10/09 面试题
大三毕业自我鉴定
2014/01/15 职场文书
2014年大学生自我评价
2014/01/19 职场文书
建筑总经理岗位职责
2014/02/02 职场文书
体育教师个人的自我评价
2014/02/16 职场文书
财务部总监岗位职责
2014/03/12 职场文书
2014年实习生工作总结
2014/11/27 职场文书
亮剑精神观后感
2015/06/05 职场文书
小学六年级毕业感言
2015/07/30 职场文书
数据分析数据库ClickHouse在大数据领域应用实践
2022/04/03 MySQL
解决Mysql报错 Table 'mysql.user' doesn't exist
2022/05/06 MySQL