`

Javascript获取CSS属性值

 
阅读更多
obj.style方法,这个方法只能JS只能获取写在html标签中的写在style属性中的值(style="..."),看一下代码
<!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" />  % O( w  K5 ^$ s# q  r6 b  G( v/ l
<title>JS获取CSS属性值</title>  " o% E9 b" e4 B. _; a9 P! V/ H
<style type="text/css">  ( ?9 E0 j7 x8 u8 _
<!--  . }" h0 ^+ s; z- P$ `
.ss{color:#cdcdcd;}  : I& [5 R; ^3 _6 v
-->  
</style>  - N2 L4 P; I2 T9 j3 R
</head>  . q: {. l; M) G1 J! F, }, I" z
<body>  : O% /# ?5 Q; u; g) P8 i
<div id="css88" class="ss" style="width:200px; height:200px; background:#333333">JS获取CSS属性值</div>  - U8 w+ o5 t! Z# A: {3 f
<script type="text/javascript">  7 Y( [/ q: A) |1 A
    alert(document.getElementById("css88").style.width);//200px   ! q+ s7 B& G4 I8 A
    alert(document.getElementById("css88").style.color);//空白   
</script>      ' N7 N: K: q8 v2 K; {+ E
</body>  
</html>  

上面这个例子对id为"css88"的div设置了2种烦事的样式,包括style和外部样式class。
9 q0 A+ ~  U# S+ q$ X1 R
从alert出来的信息可以看到,document.getElementById("css88").style方法获取不到class为ss的属性和值。
, u- G( F) Q3 m2 C+ b
那么这么样才能获取到class为ss的属性和值呢?
! C2 P* l! E0 }% c3 k
IE中使用的是obj.currentStyle方法,而FF是用的是getComputedStyle 方法。4 b- L. ^/ @# b0 w- y5 X

网上一个比较 方法是:
<!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">  1 g/ m3 x) g! T6 q
<head>  ( e$ |! N% _( s1 m
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    x' q5 V8 K6 ~" ^
<title>S获取CSS属性值</title>  6 n4 x' ]( b) ]- w1 K6 E* s
  
<style type="text/css">  1 X/ X" U+ K# T4 c5 q; G- w# F4 w
<!--  
.ss{background:blue; color:#cdcdcd; width:200px}  
-->  
</style>  
</head>  6 h2 c9 o1 d! U7 ^' t
  ( I& U" }0 J3 Q5 P7 Q
<body>  1 `8 X  l' j8 l4 y; v* y
<p id="qq" class="ss" >sdf</p>  7 U' v$ [  D- ?1 U0 S5 ?
  $ |  w: u2 x6 V3 {( Z, G
<script type="text/javascript">  
function GetCurrentStyle (obj, prop) {     
    if (obj.currentStyle) {        2 d, j% j* T3 R& Z1 M) A/ g/ N
        return obj.currentStyle[prop];     
    }      3 @$ e0 u% I/ f
    else if (window.getComputedStyle) {        + x# s, X+ Z7 /2 /
        propprop = prop.replace (/([A-Z])/g, "-$1");           
        propprop = prop.toLowerCase ();        
         return document.defaultView.getComputedStyle (obj,null)[prop];     
    }      
    return null;   8 N0 o3 /3 K1 a2 u  f) k3 g7 m, u
}   ; P3 @4 L$ d+ m3 o' g9 S* {
var dd=document.getElementById("qq");   
alert(GetCurrentStyle(dd,"width"));   ! h6 z' G7 A/ T
</script>  $ D& c# Z& Z1 p- ]5 K/ v
</body>  
</html>  

当然,如果您是引用外部的css文件同样适用。' N7 k% ]% f  w8 k
. s/ j, M: v' g
另:可以将上面的方法简化为
function getDefaultStyle(obj,attribute){ // 返回最终样式函数,兼容IE和DOM,设置参数:元素对象、样式特性   : /, J( T2 e" [; E! O; d
return obj.currentStyle?obj.currentStyle[attribute]:document.defaultView.getComputedStyle(obj,false)[attribute];   . S/ {0 P# g. O/ _2 @
} 
 
分享到:
评论

相关推荐

    Javascript获取background属性中url的值

    总的来说,这篇文章分享了一个在JavaScript中获取CSS `background-image`属性中URL值的实用技巧,并强调了处理字符串和理解CSS属性值的重要性。对于正在学习或使用JavaScript的开发者来说,这种解决问题的方法是一个...

    javascript 获取特定的 CSS属性值

    在JavaScript中,获取页面元素的CSS属性值通常是一个常见的需求。然而,当样式定义在外部CSS文件中时,直接使用`getElementById().style`属性可能无法获取到这些值,因为它们并不存储在DOM元素的内联样式中。在这种...

    JS使用getComputedStyle()方法获取CSS属性值

    本文将详细阐述使用getComputedStyle()方法来获取CSS属性值的知识点。 首先,我们需要了解,在使用JavaScript获取CSS样式时,会遇到两个问题。第一个问题是,element.style属性只能获取到直接写在HTML标签的style...

    js获取某元素的class里面的css属性值代码

    标题中的“js获取某元素的class里面的css属性值代码”指的是在JavaScript中如何获取元素基于CSS类的样式属性值。在实际开发中,我们可能需要获取某个元素根据CSS类设置的`margin`、`padding`、`height`、`border`等...

    用javascript获得css中的属性值的代码

    JavaScript 获取 CSS 属性值的代码 在 Web 开发中,获取 CSS 属性值是一项非常重要的任务,因为它可以帮助我们更好地控制网页的样式和布局。JavaScript 提供了多种方法来获取 CSS 属性值,本文将介绍其中的一些。 ...

    原生javascript实现css属性的set和get

    在JavaScript中,对CSS属性进行设置和获取是前端开发中常见的操作。原生JavaScript提供了DOM对象的style属性,可以用来直接操作元素的内联样式。本文将深入探讨如何使用原生JavaScript来实现CSS属性的set和get方法,...

    CSS属性在Javascript中对应表

    本篇文章将详细解析CSS属性在JavaScript中的对应关系,并探讨如何在JavaScript中操作这些属性。 1. **颜色属性**: - `color`:在JavaScript中,可以使用`element.style.color`来设置或获取元素的文本颜色。 - `...

    javascript 获取元素样式必杀技

    Javascript获取CSS属性值方法:getComputedStyle和currentStyle 1 .对于元素的内联CSS样式(&lt;div xss=removed&gt;hello),可以直接使用element.style.color来直接获取css属性的值; 2. 但是对于外部定义的css样式使用...

    Javascript获取相同CSS样式的元素

    `:css`选择器允许你指定一个CSS属性和对应的值。 此外,jQuery还提供了`.filter()`方法,允许你提供自定义的过滤函数来筛选元素: ```javascript var redElements = $('*').filter(function() { return $(this)....

    JavaScript访问CSS属性的几种方式介绍_.docx

    JavaScript访问CSS属性主要涉及两种方式:通过元素访问和直接访问样式表,以及一个重要的概念——运行时样式。这两种方法在JavaScript中用于动态操作网页样式,提供了丰富的可能性。 1. **通过元素访问** 这种方式...

    js控制css属性对照表

    本文将详细介绍如何利用JavaScript控制CSS属性,并提供一份详尽的属性对照表,帮助读者更好地理解和掌握这一技能。 #### 二、基础知识 ##### 2.1 CSS属性 CSS属性定义了HTML元素的外观和布局。它们由属性名和值...

    移除html元素的某个css属性

    3. **继承性**:某些CSS属性具有继承性,这意味着即使当前元素的属性值被设置为空,它仍然可能继承父元素的样式值。 4. **内联样式的优先级**:内联样式(即直接写在HTML标签中的style属性)具有较高的优先级,因此...

    [jQuery.JavaScript与CSS开发入门经典].(约克).施宏斌等.扫描版

    书中会介绍CSS的基本选择器、属性和值,帮助读者掌握如何定义元素的外观。同时,会探讨盒模型、定位、浮动等布局技巧,让读者能够创建响应式和适应不同屏幕尺寸的网页。此外,CSS3的新特性,如过渡、动画和Flexbox、...

    javascript操作css属性

    JavaScript操作CSS属性主要涉及到如何在JavaScript代码中读取和修改CSS属性值。在现代Web开发中,这一技能对于实现动态的样式变化以及与CSS样式表的交互至关重要。 首先,要获取一个DOM元素的CSS属性,可以通过多种...

    Javascript获取CSS伪元素属性的实现代码

    这段 `getStyle` 函数可以跨浏览器地获取元素的任何CSS属性值,包括伪元素的属性。当调用 `getStyle('.element', 'color')` 时,它将返回 `.element:before` 的颜色。 总的来说,通过理解CSS伪元素的概念,结合...

    用JavaScript修改CSS属性的代码

    综上,我们介绍了两种使用JavaScript修改CSS属性的方法:修改class属性和直接修改style属性。这两种方法都是通过DOM操作来实现样式的动态修改,为Web页面的交互动态效果提供了可能。掌握这些方法,将有助于我们创建...

    使用JavaScript+CSS实现翻转魔方.rar

    - 动态修改CSS样式:JavaScript可以通过style对象改变元素的CSS属性,实现动态效果。 - CSS预处理器(如Sass、Less):虽然这里没有提及,但它们可以帮助组织和扩展CSS,使与JavaScript的配合更高效。 6. **项目...

Global site tag (gtag.js) - Google Analytics