`
deng131
  • 浏览: 673889 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

JS 样式表取值函数currentStyle(IE),defaultView(FF)

阅读更多
因为写js经常需要用到访问样式,我们常用的做法是通过 DOM.style.XXX来读写样式信息的。可是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;
}
分享到:
评论
1 楼 cjc19762338 2010-08-27  
多谢分享,刚好用到!之前一直以为不可以访问css文件下的样式属性呢,哈!!

相关推荐

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

    尽管可以通过这种跨浏览器的方式获得样式的值,但是在实际开发中仍然推荐遵循标准的样式设置方法,即使用内联样式、内部样式表或外部样式表来应用样式,并通过JavaScript动态添加或修改元素的`class`属性来间接改变...

    JS在IE和FF中的兼容性问题

    JavaScript(简称JS)是一种广泛应用于Web开发的脚本语言,它在不同的浏览器中可能存在兼容性问题,特别是Internet Explorer(IE)和Firefox(FF)之间。这两个浏览器对JS的实现方式有所不同,导致某些特性或功能在...

    用js动态改变css样式表.pdf

    接下来,我们需要编写一个JavaScript函数来切换样式表。这个函数主要包括两个部分:移除当前活动样式表的链接,并添加新的样式表链接。以下是一个简单的示例: ```javascript function switchStyleSheet(styleId) {...

    javascript 读取内联之外的样式(style、currentStyle、getComputedStyle区别介绍)

    Internet Explorer 提供了`currentStyle`对象,可以获取当前元素的所有计算样式,包括内联、内部样式表和外部样式表的样式。例如,`document.getElementById('mydiv').currentStyle.width`将返回`mydiv`元素的实际...

    javascript获取非行间样式的方法

    在IE9及以下版本,可以使用`element.currentStyle`属性来获取元素的计算样式,即当前生效的样式,包括继承和计算的值。例如,`odiv.currentStyle.width`可以获取到`div1`的宽度。 但在Firefox和其他基于Webkit的...

    【JavaScript源代码】JavaScript style对象与CurrentStyle对象案例详解.docx

    - 在上述例子中,即使在外部或内部样式表中指定了颜色为灰色,但由于内联样式具有更高的优先级,因此`document.getElementById('div').style.color` 返回的颜色值将是 "red" 而不是 "gray"。 #### 二、CurrentStyle...

    Javascript的IE和Firefox兼容性问题集合

    3. **CSS样式获取**:IE使用`currentStyle`对象获取元素样式,而Firefox等其他浏览器使用`window.getComputedStyle`。可编写函数统一获取: ```javascript function getStyle(element, styleProp) { if (element....

    原生js实现jquery函数animate()动画效果的简单实例

    本文将介绍如何使用原生JavaScript实现类似jQuery中的animate()方法的动画效果。在前端开发中,jQuery提供了一套非常方便的API来实现动画效果,但随着Web标准的发展和性能优化需求的提高,原生JavaScript的方法逐渐...

    javascript获取隐藏元素(display:none)的高度和宽度的方法

    js获取可见元素的尺寸还是比较方便的,这个可以直接使用这个方法: 代码如下:function getDefaultStyle(obj,attribute){ // 返回最终样式函数,兼容IE和DOM,设置参数:元素对象、样式特性 return obj.currentStyle...

    JS获取CSS样式(style/getComputedStyle/currentStyle)

    2. **`element.currentStyle`**:这是IE浏览器特有的属性,返回一个CSS样式对象,包含了元素的所有样式,包括内联样式和从样式表继承的样式。但在非IE浏览器中,这个属性会返回`undefined`。 3. **`window....

    Javascript 访问样式表实现代码

    JavaScript 访问样式表是网页动态效果和交互中不可或缺的一部分,它允许我们在运行时获取或修改元素的样式信息。在本文中,我们将深入探讨如何利用 JavaScript 来操作 CSS 样式表。 首先,JavaScript 可以直接访问 ...

    js获取页面引用的css样式表中的属性值方法(推荐)

    总的来说,通过这个推荐的`getStyle`函数,开发者可以方便地在JavaScript中获取页面中元素的CSS属性值,无论这些属性是定义在行内样式、内部样式表还是外部样式表中。这个方法兼容多种浏览器,提高了代码的可移植性...

    JS非行间样式获取函数的实例代码

    而非行间样式是通过CSS规则定义的样式,例如在`&lt;style&gt;`标签中或者外部样式表中定义的样式,如`div { width: 200px; }`。 接着,通过一个实例来说明问题所在:当尝试通过点击事件改变一个方块的宽度时,使用了内联...

    IE6升级到IE9兼容性问题和操作手册

    1. **表对象模式**:IE8到IE9的升级改进了表对象的渲染,使其更符合其他现代浏览器的标准,提高了跨浏览器的一致性。 2. **文本布局**:IE9开始使用自然度量进行文本布局,而非之前的GDI度量。这可能导致原有的基于...

    JavaScript样式.docx

    然而,style属性仅能反映元素自身的内联样式,而不包括外部样式表或继承的样式。 在获取元素的实际应用样式时,IE和W3C DOM有不同的方法。IE浏览器提供了currentStyle属性,它可以获取元素的实际样式,无论样式来源...

    JS getStyle获取最终样式函数代码

    样式可以通过不同的方式被定义,包括内联样式、外部或内部样式表,以及通过JavaScript动态设置。在JavaScript中获取元素样式属性的值是非常常见的需求,特别是在动态地处理用户交互或根据用户的浏览器特性进行样式...

    前端学习笔记style,currentStyle,getComputedStyle的用法与区别

    `currentStyle`包含了元素的所有样式,包括内联样式和内部样式表定义的样式,但不包括外部样式表。因此,`element.currentStyle.width`可以获取元素的实际宽度,即使这个宽度不是直接在`style`属性中定义的。 而在...

Global site tag (gtag.js) - Google Analytics