使用 document.getElementById().style.height javascript 从 css 获取值

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/3050211/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 03:05:30  来源:igfitidea点击:

get value from css using document.getElementById().style.height javascript

javascript

提问by Jamex

Please offer insight into this mystery.

请提供洞察这个奥秘。

I am trying to get the height value from a div box by

我正在尝试通过以下方式从 div 框中获取高度值

var high = document.getElementById("hintdiv").style.height; 
alert(high);

I can get this value just fine if the attribute is contained within the div tag, but it returns a blank value if the attribute is defined in the css section.

如果属性包含在 div 标签中,我可以很好地获得这个值,但如果属性是在 css 部分中定义的,它会返回一个空白值。

This is fine, it shows 100px as a value. The value can be accessed.

这很好,它显示 100px 作为一个值。可以访问该值。

<div id="hintdiv" style="height:100px; display: none;">
.
.
var high = document.getElementById("hintdiv").style.height; 
    alert(high); 

This is not fine, it shows an empty alert screen. The value is practically 0.

这不好,它显示一个空的警报屏幕。该值实际上为 0。

#hintdiv
{
height:100px
display: none; 
}

<div id="hintdiv">
.
.
var high = document.getElementById("hintdiv").style.height; 
    alert(high); 

But I have no problem accessing/changing the "display:none" attribute whether it is in the tag or in the css section. The div box displays correctly by both attribute definition methods (inside the tag or in the css section).

但是,无论是在标记中还是在 css 部分,访问/更改“display:none”属性都没有问题。div 框通过两种属性定义方法(在标签内或在 css 部分)都能正确显示。

I also tried to access the value by other variations, but no luck

我还尝试通过其他变体访问该值,但没有运气

document.getElementById("hintdiv").style.height.value  ----> undefined
document.getElementById("hintdiv").height ---->undefined
document.getElementById("hintdiv").height.value  ----> error, no execution

Any solution?

有什么解决办法吗?

TIA.

TIA。

回答by tere?ko

This is because, when you use document.getElementById("hintdiv").style.height;you are accessing the styleattribute of the tag. If the attribute is not there , then you get no values.

这是因为,当您使用时,document.getElementById("hintdiv").style.height;您正在访问style标签的属性。如果该属性不存在,则您不会获得任何值。

Instead you should use currentStyleobject in IE and getComputedStyle()function in the rest of web browsers.

相反,您应该currentStyle在 IE 中使用对象,并getComputedStyle()在其他 Web 浏览器中使用函数。

回答by Pierre

You CSS syntax is wrong, it sould be height:100px;rather than height:100px. Note the semicolon.

你的 CSS 语法是错误的,它应该是height:100px;而不是height:100px. 注意分号。

回答by Developer IT

You should consider usign jQuery instead... it will simplify the thing as $('#hintDiv').height() and it will always return the actual width of the div.

你应该考虑使用 jQuery 代替......它会将事情简化为 $('#hintDiv').height() 并且它将始终返回 div 的实际宽度。