我知道我可以通过JavaScript设置CSS值，如:
document.getElementById('image_1').style.top = '100px';
但是，我能得到当前特定的样式值吗?我已经读到我可以得到元素的整个风格，但我不想不得不解析整个字符串，如果我不需要的话。
当前回答
您可以使用getComputedStyle()。
var element = document.getElementById('image_1')， style = window.getComputedStyle(element) top = style.getPropertyValue('top'); console.log(上); < img id = " image_1 " >
jsFiddle。
其他回答
如果你以编程方式设置它，你可以像调用变量一样调用它(即document.getElementById('image_1').style.top)。否则，你可以使用jQuery:
<html>
<body>
<div id="test" style="height: 100px;">Test</div>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
alert($("#test").css("height"));
</script>
</body>
</html>
您可以使用getComputedStyle()。
var element = document.getElementById('image_1')， style = window.getComputedStyle(element) top = style.getPropertyValue('top'); console.log(上); < img id = " image_1 " >
jsFiddle。
元素。style属性让你只知道在该元素中定义为内联的CSS属性(通过编程方式，或者在元素的style属性中定义)，你应该得到计算的样式。
在跨浏览器的方式中并不是那么容易做到的，IE有自己的方式，通过元素。而DOM Level 2的标准方式，被其他浏览器实现是通过document.defaultView.getComputedStyle方法。
这两种方式有区别，例如IE元素。currentStyle属性期望你访问由两个或多个单词组成的CSS属性名(如maxHeight, fontSize, backgroundColor等)，标准方式期望用破折号分隔的属性(如max-height, font-size, background-color等)。 ．．．．．．
function getStyle(el, styleProp) {
var value, defaultView = (el.ownerDocument || document).defaultView;
// W3C standard way:
if (defaultView && defaultView.getComputedStyle) {
// sanitize property name to css notation
// (hyphen separated words eg. font-Size)
styleProp = styleProp.replace(/([A-Z])/g, "-$1").toLowerCase();
return defaultView.getComputedStyle(el, null).getPropertyValue(styleProp);
} else if (el.currentStyle) { // IE
// sanitize property name to camelCase
styleProp = styleProp.replace(/\-(\w)/g, function(str, letter) {
return letter.toUpperCase();
});
value = el.currentStyle[styleProp];
// convert other units to pixels on IE
if (/^\d+(em|pt|%|ex)?$/i.test(value)) {
return (function(value) {
var oldLeft = el.style.left, oldRsLeft = el.runtimeStyle.left;
el.runtimeStyle.left = el.currentStyle.left;
el.style.left = value || 0;
value = el.style.pixelLeft + "px";
el.style.left = oldLeft;
el.runtimeStyle.left = oldRsLeft;
return value;
})(value);
}
return value;
}
}
主参考堆栈溢出
使用下面的方法。它帮助了我。
document.getElementById('image_1').offsetTop
参见获取样式。
2021年
使用前检查
您可以使用computedStyleMap()
答案是有效的，但有时你需要检查它返回什么单位，你可以得到没有任何slice()或substring()字符串。
var element = document.querySelector('.js-header-rep');
element.computedStyleMap().get('padding-left');
var element = document.querySelector('.jsCSS'); var con = element.computedStyleMap().get('padding-left'); console.log (con); .jsCSS { 宽度:10眼动; 高度:10眼动; 背景颜色:天蓝色; padding-left: 10 px; ｝ < div class = " jsCSS " > < / div >
