无法通过Javascript检索CSS属性 [英] Trouble retrieving CSS properties via Javascript
问题描述
我可以发誓我以前做过这件事，但突然之间，我似乎无法通过Javascript检索CSS属性的值。
例如，请参阅此文档：
http://weston.canncentral.org/web_la.../testcase.html
该文件非常简单。有一个div id'为maindiv。它是
通过外部样式表设置了一些CSS属性：
#maindiv {
margin： 5％自动;
宽度：200px;
身高：200px;
text-align：center;
font-size：16px;
font-family：arial;
font-weight：bold;
background-color：white;
}
我想要做的就是抓住那些属性（比如，一个
元素' 'CSS定义的高度）通过javascript，使用像
这样的东西：
id =''maindiv'';
emt = document.getElementById（id）;
emt_height = emt.style.height;
除了这似乎对我不起作用。如果您点击上面文档中的
定位白色div，并将源与产生的输出进行比较
，您将看到我的意思。
我是否只是想象你可以检索这些设置，或者在这种情况下有什么我做错了吗？
谢谢，
Weston
I could swear that I''ve done this before, but suddenly, I seem to be
unable to retrieve the values of CSS properties via Javascript.
For example, take this document:
http://weston.canncentral.org/web_la.../testcase.html
The document is pretty simple. There''s a div id''d as "maindiv". It''s
got a few CSS properties set on it via an external stylesheet:
#maindiv {
margin: 5% auto;
width: 200px;
height: 200px;
text-align: center;
font-size: 16px;
font-family: arial;
font-weight: bold;
background-color: white;
}
And what I''d like to be able to do, is grab those properties (say, an
element''s CSS-defined height) via javascript, using something like
this:
id = ''maindiv'';
emt = document.getElementById(id);
emt_height = emt.style.height;
Except this doesn''t seem to be working for me. If you click on the
positioned white div in the above document, and compare the source with
the produced output, you''ll see what I mean.
Have I just been imagining that you can retrieve these settings, or is
there something I''m doing wrong in this case?
Thanks,
Weston
推荐答案
weston写道：
我可以发誓我以前做过这个，但突然间，我似乎无法通过Javascript检索CSS属性的值。
例如，请参阅此文件：
http：/ /weston.canncentral.org/web_la.../testcase.html
该文件非常简单。有一个div id'为maindiv。它通过外部样式表设置了一些CSS属性：
#maindiv {
边距：5％自动;
宽度：200px;
高度：200px;
text-align：center;
font-size：16px;
font-family：arial;
font-weight：bold;
background-color：white;
}
我想要做的就是抓住那些属性（例如，
元素'' CSS定义的高度）通过javascript，使用类似
这样的东西：
id =''maindiv'';
emt = document.getElementById（id）;
emt_height = emt.style.height;
除此之外似乎不适合我。如果你点击
I could swear that I''ve done this before, but suddenly, I seem to be
unable to retrieve the values of CSS properties via Javascript.
For example, take this document:
http://weston.canncentral.org/web_la.../testcase.html
The document is pretty simple. There''s a div id''d as "maindiv". It''s
got a few CSS properties set on it via an external stylesheet:
#maindiv {
margin: 5% auto;
width: 200px;
height: 200px;
text-align: center;
font-size: 16px;
font-family: arial;
font-weight: bold;
background-color: white;
}
And what I''d like to be able to do, is grab those properties (say, an
element''s CSS-defined height) via javascript, using something like
this:
id = ''maindiv'';
emt = document.getElementById(id);
emt_height = emt.style.height;
Except this doesn''t seem to be working for me. If you click on the
元素'的样式对象显示已经应用的样式
直接到元素''风格，而不是那些继承的风格。使用
currentStyle for IE和getComputedStyle用于其他DOM 2浏览器。
这里有一条Martin Honnen帖子应该有所帮助：
< URL：http：//groups.google.co.uk/group/comp.lang.javascript/browse_frm/thread/f64ec492a152de81/f7a42159d764d522？q = getcomputedstyle + currentStyle& r num = 1& hl = en＃f7a42159d764d522>
[...]
-
Rob
The element''s style object shows the styles that have been applied
directly to the element''s style, not those that are inherited. Use
currentStyle for IE and getComputedStyle for other DOM 2 browsers.
There is a Martin Honnen post here that should help:
<URL:http://groups.google.co.uk/group/comp.lang.javascript/browse_frm/thread/f64ec492a152de81/f7a42159d764d522?q=getcomputedstyle+currentStyle&r num=1&hl=en#f7a42159d764d522>
[...]
--
Rob
与RobG所说的相同，对mozilla使用getComputedStyle（） - >
http://developer.mozilla.org/en/docs...tComputedStyle
和IE的OBJHERE.runtimeStyle.PROPERTYHERE。
Danny
Ditto to what RobG said, use getComputedStyle() for mozilla ->
http://developer.mozilla.org/en/docs...tComputedStyle
and OBJHERE.runtimeStyle.PROPERTYHERE for IE.
Danny
确实很有帮助。谢谢。
但我真的不知道为什么IE和Moz
开发人员选择乘法实体并存储计算结果风格
别的地方。如果它将被计算和存储（因为它显然必须用于渲染目的），为什么不把它保持在什么
似乎是直观的地方 -
对象的样式属性？
Quite helpful indeed. Thank you.
But I''m really more than a little puzzled as to why the IE and Moz
developers chose to multiply entities and store the computed style
somewhere else. If it''s going to be computed and stored (as it
obviously has to be for rendering purposes), why not keep it in what
would seem to be the intuitive place -- the style property of the
object?
这篇关于无法通过Javascript检索CSS属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
