obj.style方法，这个方法只能JS只能获取写在html标签中的写在style属性中的值（style="..."），看一下代码
[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
: X- [% m, M0 U7 L& I8 Y0 j! ^3 N<html xmlns="http://www.w3.org/1999/xhtml">
l; N- F( Y% [; R+ ^* c<head>
6 M- n1 N1 t1 x<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />% O( wK5 ^$ s# qr6 bG( 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
-->
1 V1 j" ~3 D( D0 s9 {. l</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);//空白
0 wX# cF; N# E4 C* W</script> ' N7 N: K: q8 v2 K; {+ E
</body>
. E, H4 n3 W$ l: ]& p' RE- i6 D</html>
[/code]
上面这个例子对id为"css88"的div设置了2种烦事的样式，包括style和外部样式class。
1 ^0 F/ S* G" g! F- u9 y. d9 q0 A+ ~U# S+ q$ X1 R
从alert出来的信息可以看到，document.getElementById("css88").style方法获取不到class为ss的属性和值。
+ r4 \% q6 D4 w8 q0 T, u- G( F) Q3 m2 C+ b
那么这么样才能获取到class为ss的属性和值呢？
" H2 v8 u& Dp' B% v! C2 P* l! E0 }% c3 k
IE中使用的是obj.currentStyle方法，而FF是用的是getComputedStyle 方法。4 b- L. ^/ @# b0 w- y5 X
* c1 V$ |$ r( v5 j$ B) \' j9 p网上一个比较方法是：
[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
8 F; ^/ P& K" d4 A* B& d( y! C% G<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
" z- J2 b/ ]% v8 f- `" J' l<style type="text/css">1 X/ X" U+ K# T4 c5 q; G- w# F4 w
<!--
; t4 m( C1 r- e.ss{background:blue; color:#cdcdcd; width:200px}
# g& y0 T# N0 t# Z' y-->
1 f0 N* x- ]8 I4 s7 x' I9 ^</style>
0 \6 E% Cv1 Q% m- `3 }</head>6 h2 c9 o1 d! U7 ^' t
( I& U" }0 J3 Q5 P7 Q
<body>1 `8 Xl' 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">
_3 L" v$ [0 _" C! x7 Z1 r; sfunction GetCurrentStyle (obj, prop) {
2 l/ K: D; G* V; ]9 \# s* A if (obj.currentStyle) { 2 d, j% j* T3 R& Z1 M) A/ g/ N
return obj.currentStyle[prop];
4 P5 n, |9 B5 {0 `- j/ e } 3 @$ e0 u% I/ f
else if (window.getComputedStyle) { + x# s, X+ Z7 \2 \
propprop = prop.replace (/([A-Z])/g, "-$1");
+ f) {2 O4 w) ?e9 @, C% K& N propprop = prop.toLowerCase ();
; N: T/ M% }" |! g3 W return document.defaultView.getComputedStyle (obj,null)[prop];
$ aH( E) q9 ?+ F }
8 O; N5 [9 _9 X/ E1 B return null; 8 N0 o3 \3 K1 a2 uf) k3 g7 m, u
} ; P3 @4 L$ d+ m3 o' g9 S* {
var dd=document.getElementById("qq");
, N0 |% b. E6 b( rkalert(GetCurrentStyle(dd,"width")); ! h6 z' G7 A/ T
</script>$ D& c# Z& Z1 p- ]5 K/ v
</body>
: w; c! o. ^# c7 \9 B</html>
[/code]
当然，如果您是引用外部的css文件同样适用。' N7 k% ]% fw8 k
. s/ j, M: v' g
另：可以将上面的方法简化为[code]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 @
}
[/code]
分享到：
相关推荐
总的来说，要从元素的CSS类中获取属性值，开发者需要理解JavaScript与CSS样式之间的交互机制，以及如何正确地使用`getComputedStyle`和`currentStyle`。此外，还需要关注浏览器兼容性问题，尤其是对于旧版IE浏览器，...
这个方法是“DOM2级样式”规范中的一部分，通过document.defaultView对象提供，它能够获取元素的所有最终使用的CSS属性值，包括通过样式表应用的样式。需要注意的是，getComputedStyle()返回的是一个...
使用属性前缀选择器（如[class^='btn']），可以基于属性值开头的字符串选择元素。这样可以实现类似于单类模式下的上下文重写，但这种方法可能会有局限性，比如当存在多个类名时，可能会导致样式无法正确应用。 通过...
在 Web 开发中，获取 CSS 属性值是一项非常重要的任务，因为它可以帮助我们更好地控制网页的样式和布局。JavaScript 提供了多种方法来获取 CSS 属性值，本文将介绍其中的一些。 首先，让我们来看一个简单的示例代码...
CSS中的属性选择器是一种强大的选择器，允许开发者根据HTML元素的属性值来选择元素。今天，我们将深入探讨CSS属性选择器的详细解释。 什么是CSS属性选择器？ --------------------- CSS属性选择器是一种特殊的选择...
- `E[foo~="warning"]` 匹配`foo`属性值列表中含有`warning`的`E`元素。 - `E[lang|="en"]` 匹配`lang`属性值以`en`开头的`E`元素。 7. **类选择器（Class）**：`.class` 匹配具有指定类名的元素。 8. **ID选择器...
`attrs`属性可以获取标签的所有属性值。如果`<title>`标签没有属性，则输出为空字典。 6. **获取title标签的class属性**: ```python if 'class' in title_attrs: print(title_attrs['class']) ``` 如果`...
还有许多其他CSS属性和DOM属性，如`display`（控制元素的可见性），`margin`和`padding`（控制元素边距和内填充），`fontSize`（设置字体大小），以及`value`（获取或设置表单元素的值）等，都是开发者日常工作中不...
2. 属性与值：每个CSS规则由一个选择器和一组属性声明组成，属性是描述元素外观或行为的特性，如`color`、`font-size`、`background-color`；而值则是分配给属性的具体参数，如`red`、`16px`、`url(image.jpg)`。 3...
在JavaScript中获取具有相同CSS样式的元素是一项常见的任务，特别是在进行网页动态效果或者交互设计时。这个主题主要涉及DOM操作、CSS选择器以及jQuery库（因为文件名中有"jq"，我们推测可能使用了jQuery）。下面...
以上只是CSS常用属性的一部分，实际应用中还有许多其他属性，如`opacity`、`transform`、`cursor`等。理解并熟练运用这些属性，能帮助开发者创建出美观且功能丰富的网页界面。在实践中不断探索和学习，是提升CSS技能...
这个“前端学习笔记”主题主要涉及的是如何通过修改HTML元素的class属性值来控制元素的显示与隐藏，这在网页交互设计中非常常见。我们将深入探讨这个过程，以及相关的前端技术。 首先，HTML是构成网页的基础语言，...
用类选择器规定样式的时候,需要为元素指定类名,即class属性的值. 注意每个HTML元素只有一个class属性.但是class属性的值可以是多个名称,即可能包含一个词的列表,中间用空格分隔. 具体使用方法见:...
calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，你可以使用calc()给元素的border、margin、pading、font-size、width和height等属性设置动态值。 怎么使用 calc()可以使用数学运算中的简单加（+）、...
在CSS布局中，绝对定位（absolute positioning）是一种强大的定位机制，允许开发者精确地控制元素在网页上的位置。本文将深入探讨CSS绝对定位属性`absolute`的用法，并提供实例来帮助理解。 首先，理解`position`...
以上只是CSS中部分核心概念和属性，实际上CSS包含更多功能，如颜色、文本阴影、背景裁剪、渐变、滤镜等，它为网页设计提供了无限的可能。在软件开发中，熟练掌握CSS能够帮助开发者构建美观、响应式的用户界面。
例如，`[title=W3School]` 将选择所有 `title` 属性值为 `W3School` 的 HTML 元素。 多个值选择器 属性选择器还可以选择带有多个值的 HTML 元素。例如，`[title~=hello]` 将选择所有 `title` 属性值包含 `hello` ...
<div class=hello xss=removed> <h5>{{ msg }} [removed] export default { data() { return { msg: Welcome to Your Vue.js App, }; }, computed: { getClientHeight:function () { /