我知道我可以通过 JavaScript 设置一个 CSS 值，例如：
document.getElementById('image_1').style.top = '100px';
但是，我可以获取当前的特定样式值吗？我已经阅读了在哪里可以获得元素的整个样式，但如果不需要，我不想解析整个字符串。
【问题讨论】：
var top = document.getElementById('image_1').style.top; 这样的东西，如果这不是你想要的，可能需要改写
标签： javascript css
您可以使用getComputedStyle()。
var element = document.getElementById('image_1'),
style = window.getComputedStyle(element),
top = style.getPropertyValue('top');
console.log(top);<img id="image_1">【讨论】：
如果您以编程方式设置它，您可以像变量一样调用它（即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>
【讨论】：
为了安全起见，您可能希望在尝试读取该元素之前检查该元素是否存在。如果它不存在，您的代码将抛出一个异常，这将停止在您的 JavaScript 的其余部分上执行，并可能向用户显示一条错误消息——不好。你希望能够优雅地失败。
var height, width, top, margin, item;
item = document.getElementById( "image_1" );
if( item ) {
height = item.style.height;
width = item.style.width;
top = item.style.top;
margin = item.style.margin;
} else {
// Fail gracefully here
}
【讨论】：
【讨论】：
element.style 属性让您只知道在该元素中定义为内联的 CSS 属性（以编程方式，或在元素的 style 属性中定义），您应该获得计算的样式。
跨浏览器的方式没那么容易，IE有自己的方式，通过element.currentStyle属性，而DOM Level 2标准方式，其他浏览器通过document.defaultView.getComputedStyle实现方法。
这两种方式有区别，例如IE element.currentStyle 属性期望你访问由camelCase 中的两个或多个单词组成的CSS 属性名（例如maxHeight、fontSize、backgroundColor 等），标准方式期望用破折号分隔的单词的属性（例如，最大高度、字体大小、背景颜色等）。 ......
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;
}
}
【讨论】：
无需 DOM 操作即可检查 CSS 值的跨浏览器解决方案：
function get_style_rule_value(selector, style)
{
for (var i = 0; i < document.styleSheets.length; i++)
{
var mysheet = document.styleSheets[i];
var myrules = mysheet.cssRules ? mysheet.cssRules : mysheet.rules;
for (var j = 0; j < myrules.length; j++)
{
if (myrules[j].selectorText && myrules[j].selectorText.toLowerCase() === selector)
{
return myrules[j].style[style];
}
}
}
};
用法：
get_style_rule_value('.chart-color', 'backgroundColor')
经过清理的版本（强制选择器输入为小写，并允许用例不带前导“.”）
function get_style_rule_value(selector, style)
{
var selector_compare=selector.toLowerCase();
var selector_compare2= selector_compare.substr(0,1)==='.' ? selector_compare.substr(1) : '.'+selector_compare;
for (var i = 0; i < document.styleSheets.length; i++)
{
var mysheet = document.styleSheets[i];
var myrules = mysheet.cssRules ? mysheet.cssRules : mysheet.rules;
for (var j = 0; j < myrules.length; j++)
{
if (myrules[j].selectorText)
{
var check = myrules[j].selectorText.toLowerCase();
switch (check)
{
case selector_compare :
case selector_compare2 : return myrules[j].style[style];
}
}
}
}
}
【讨论】：
上面给出的没有 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;
}
但是，这种简单的搜索不适用于复杂的选择器。
【讨论】：
2021 年
check使用前
你可以使用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 {
width: 10rem;
height: 10rem;
background-color: skyblue;
padding-left: 10px;
}<div class="jsCSS"></div>【讨论】：