blocks|key|413450|text|您不能以未使用Javascript设置的方式访问CSS属性。您需要使用getComputedStyle，请参阅https://developer.mozilla.org/en/DOM/window.getComputedStyle在MSIE上的工作方式。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|413451|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en/DOM/window.getComputedStyle^0|Z|G|1J|1O|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]]|D|@$9|Q|A|R|1|S]]|E|$]]|$1|F|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]]]

You cannot access CSS properties that way that have not been set using Javascript. You need to use <code>getComputedStyle</code>, see <a href="https://developer.mozilla.org/en/DOM/window.getComputedStyle" rel="nofollow">https://developer.mozilla.org/en/DOM/window.getComputedStyle</a>
On MSIE this works differently.

blocks|key|438090|text|尝试以下几点|type|unstyled|depth|inlineStyleRanges|entityRanges|data|438091|window.onload+=+function(){

var+x+=+document.getElementById("hello");
var+y+="";
if+(x.currentStyle)
++++y+=+x.currentStyle['width'];
else+if+(window.getComputedStyle)
++++y+=+document.defaultView.getComputedStyle(x,null).getPropertyValue('width');
alert(y);



};|code-block|syntax|javascript|438092|它的灵感来源于我读到的这里|offset|length|438093|entityMap|0|LINK|mutability|MUTABLE|url|http://www.quirksmode.org/dom/getstyles.html^0|0|0|B|2|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

Try the following

<pre><code>window.onload = function(){

var x = document.getElementById("hello");
var y ="";
if (x.currentStyle)
 y = x.currentStyle['width'];
else if (window.getComputedStyle)
 y = document.defaultView.getComputedStyle(x,null).getPropertyValue('width');
alert(y);



};
</code></pre>

It was inspired from something I read <a href="http://www.quirksmode.org/dom/getstyles.html" rel="nofollow">Here</a>

blocks|key|413425|text|在InternetExplorer中，您可以使用.currentStyle而不是.style。在其他浏览器中，您可以使用getComputedStyle机制。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|413426|var+yourElement+=+document.getElementById('whatever');
var+theStyle+=+window.getComputedStyle(yourElement);|code-block|syntax|javascript|413427|然后，可以对返回的样式对象调用.getPropertyValue()，以查找您感兴趣的CSS属性。|413428|entityMap^0|O|D|14|6|1O|G|0|0|F|J|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|N|$]]

In InternetExplorer you can use <code>.currentStyle</code> instead of <code>.style</code>. In other browsers, you can use the <code>getComputedStyle</code> mechanism.

<pre><code>var yourElement = document.getElementById('whatever');
var theStyle = window.getComputedStyle(yourElement);
</code></pre>

You can then call <code>.getPropertyValue()</code> on the returned style object to find the CSS properties you're interested in.

blocks|key|413434|text|试着把你的css放在页面的头部部分。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|413435|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Try to put your css in the head section of the page.

blocks|key|893133|text|我不认为style.width被赋予了一个值，除非您明确地定义了它。正如其他人所说，您可以使用currentStyle/getComputedStyle获取CSS项的实际值。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|893134|如果您需要的只是宽度，您可以使用element.offsetWidth。如果您需要将值作为百分比，则必须将元素offsetWidth与父元素offsetWidth进行比较。|893135|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

I don't think style.width is given a value unless you explicitly define it one. As others have said you can use currentStyle/getComputedStyle to get actual values of CSS items.

If you need JUST the width you can go with element.offsetWidth. If you need the value as a percent you'll have to compare the elements offsetWidth with the parents offsetWidth.

blocks|key|413457|text|jQuery会为你做的|type|unstyled|depth|inlineStyleRanges|entityRanges|data|413458|$('#hello').mouseover(function({
++alert($(this).width());+
});|code-block|syntax|javascript|413459|就试一下!|413460|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

jQuery will do it for you

<pre><code>$('#hello').mouseover(function({
 alert($(this).width()); 
});
</code></pre>

Just try it!

blocks|key|438684|text|你反对使用jQuery吗？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|438685|http://api.jquery.com/width/|offset|length|438686|$(document).ready(function(){
++++alert($("#hello").width());
});|code-block|syntax|javascript|438687|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|S|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@$D|T|E|U|1|V]]|A|$]]|$1|F|3|G|5|H|7|W|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|C]]]]

Are you adverse to using jQuery?

<a href="http://api.jquery.com/width/" rel="nofollow">http://api.jquery.com/width/</a>

<pre><code>$(document).ready(function(){
 alert($("#hello").width());
});
</code></pre>

This works:

<blockquote>
<pre><code>&lt;div id="hello" style="width:100%;"&gt;&lt;/div&gt;
&lt;script&gt;
window.onload = function(){

alert(document.getElementById("hello").style.width);

};
&lt;/script&gt;
</code></pre>
</blockquote>

This does not work: 

<blockquote>
<pre><code>&lt;div id="hello"&gt;&lt;/div&gt;
&lt;style&gt;
div#hello{
 width:100%;
}
&lt;/style&gt;
&lt;script&gt;
window.onload = function(){

alert(document.getElementById("hello").style.width);

};
&lt;/script&gt;
</code></pre>
</blockquote>

<ul>
<li>I have also tried properly putting the css style definition in the head tag, didn't work</li>
<li>I have tried defining a javascript function instead of calling on window.onload , didn't work</li>
</ul>

strangest thing is, if I set the width using javascript:

<blockquote>
<pre><code>alert( document.getElementById("hello").style.width );
document.getElementById("hello").style.width = "25%";
alert(document.getElementById("hello").style.width );
</code></pre>
</blockquote>

It would work. The first alert would show a blank alert, then the second alert will show "25%"

Reading CSS value using JavaScript

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

这样做是可行的：这样做是而不是的工作：我还试过将css样式定义正确地放置在head标记中，但没有工作我尝试过定义javascript函数，而不是调用window.onload，但没有工作最奇怪的是，如果我使用javascript设置宽度：警报( document.getElementById("hello").style.width )；document.getElementById("hello

问使用JavaScript读取CSS值
EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用JavaScript读取CSS值EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用JavaScript读取CSS值
EN