我知道我可以通过JavaScript设置CSS值，如:
document.getElementById('image_1').style.top = '100px';
但是，我能得到当前特定的样式值吗?我已经读到我可以得到元素的整个风格，但我不想不得不解析整个字符串，如果我不需要的话。
当前回答
如果你以编程方式设置它，你可以像调用变量一样调用它(即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>
其他回答
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 >
您可以使用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').offsetTop
参见获取样式。
上述没有DOM操作的跨浏览器解决方案无法工作，因为它给出的是第一个匹配规则，而不是最后一个匹配规则。最后一个匹配规则是应用的匹配规则。以下是一个工作版本:
function getStyleRuleValue(style, selector) {
let value = null;
for (let i = 0; i < document.styleSheets.length; i++) {
const mysheet = document.styleSheets[i];
const myrules = mysheet.cssRules ? mysheet.cssRules : mysheet.rules;
for (let j = 0; j < myrules.length; j++) {
if (myrules[j].selectorText &&
myrules[j].selectorText.toLowerCase() === selector) {
value = myrules[j].style[style];
}
}
}
return value;
}
但是，对于复杂的选择器，这种简单的搜索将不起作用。
如果你以编程方式设置它，你可以像调用变量一样调用它(即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>
