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]
分享到：
相关推荐
但是你说的只能获取直接在标签中写的style的属性，无法获取标签style外的属性（如css文件中的属性)。而下面方法则两者值都可以获取。实例效果图如下: js在获取css属性时如果标签中无style则无法直接获取css中的...
用类选择器规定样式的时候,需要为元素指定类名,即class属性的值. 注意每个HTML元素只有一个class属性.但是class属性的值可以是多个名称,即可能包含一个词的列表,中间用空格分隔. 具体使用方法见:...
calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，你可以使用calc()给元素的border、margin、pading、font-size、width和height等属性设置动态值。 怎么使用 calc()可以使用数学运算中的简单加（+）、...
<div class=hello xss=removed> <h5>{{ msg }} [removed] export default { data() { return { msg: Welcome to Your Vue.js App, }; }, computed: { getClientHeight:function () { /
在CSS样式中以小写的“点”及“.”来命名如： .css5{属性：属性值;} ,而在html页面里则以class=css5 来选择调用,命名好的CSS又叫css选择器。如： .css5{属性：属性值;} 选择器在html调用为“<div
根据元素的class属性值，选中一组元素 语法：.class{} 例子： .hello{} .box{} 通配选择器 选中页面中的所有元素 语法：*{} 通配选择器的性能比较差，尽量避免使用 并集选择器 ...
用JS修改标签的 class 属性值： class 属性是在标签上引用样式表的方法之一，它的值是一个样式表的选择符，如果改变了 class 属性的值，标签所引用的样式表也就更换了，所以这属于第一种修改方法。 更改一个标签的 ...
当前值：当前属性在数据库中的存储值 链接文字：当前属性的超级链接显示的文字内容 当前链接样式：选中当前链接时的CSS样式类（可留空为''） 初始化选中项链接文字：默认初始化时的链接文字（一般为'不限'或'全部...
在定义的中，多个标签的class属性值可以相同，而id值要唯一，因为JavaScript中经常用。 8.class选择器： 在标签中定义class属性并赋值。通过标签名.class值 对该标签进行样式设置。 例： 相同标签设置不同样式的...
本文实例讲述了jQuery针对input的class属性写了多个值情况下的选择方法。分享给大家供大家参考，具体如下： jQuery选择input的class属性写了多个值的情况： <html> <head> <meta ...
CSS选择符详解，内容包括元素选择符... 属性选择符大致可分为四类：简单属性选择符、精准属性值选择符、部分匹配属性值选择符和起始值属性选择符。 简单属性选择符：根据属性选择元素。 Eg：h1[class] {color: silv
第 5 章 CSS 基本布局属性 第50 页 5.1 页面的制作流程和整体分析 5.2 元素定位基础知识 5.2.1 块元素的默认排列 5.2.2 内联元素的默认排列 5.2.3 块元素和内联元素的混合默认排列 5.2.4 使用浮动属性进行定位 5.3 ...
属性值正则匹配选择器包括下面3种： [attr^="val"] [attr$="val"] [attr*="val"] 这3种属性选择器是字符匹配，而非单词匹配。其中，尖角符号^、美元符号$以及星号*都是正则表达式中的特殊标识符，分别表示前匹配...
2.10 CSS的属性和值 49 2.10.1 字体属性 49 2.10.2 文本属性 56 2.10.3 颜色和背景属性 61 2.10.4 边框属性 68 2.10.5 列表属性 74 2.10.6 定位属性 80 2.10.7 鼠标属性 82 2.11 小结 84 第2篇 玩转设计 第3章 图像...
零、概览CSS2支持的属性选择器用一个表达式[{属性 | 属性 {= | |= | ~=} 值}]1.[class=a]只能匹配class=a的元素2.[class~=a]则可以匹配class=a、class=a b的元素3.[lang|=en]则可以匹配lang=en、lang=en-us的元素。...
独立于任何网页位置处，声明一个样式文件(.css为后缀)，在文件中声明样式，在使用的网页中引入.css文件。 使用步骤： 1.创建样式表文件（.css） 2.在样式文件中编写样式规则 3.在网页中对样式文件进行引入 <...
在编写html的过程中，我们会经常为class属性定义多个值，但是同样会经常发现自己定义的值无效！！！ 以前碰到这种情况我就直接重写了，或者直接用id设置css属性，今天想起来好像有些不对哦。。。我必须得去发现真理...
自己做点小程序的时候发现在一个标签中的不同两个类给同一属性设定了不同值的时候，最终属性取值的特点： 上面这句话有够拗口的，用例子说明一切吧。 csstest.html: 复制代码代码如下: <!DOCTYPE HTML> <...
属性选择器的格式是元素后跟中括号，中括号内带属性，或者属性表达式（不知道描述是否正确，自创的词），比如h1[title],h1[title="Logo"]等，你可以从我下面的论述中看到4种具体形式。1、简易属性选择器 只顾其名...