使用 JavaScript 获取 CSS 值

javascript css

2022-08-30 00:41:17

我知道我可以通过JavaScript设置CSS值，例如：

document.getElementById('image_1').style.top = '100px';

但是，我可以获得当前特定的样式值吗？我已经阅读了可以获取元素的整个样式的位置，但是如果不需要，我不想解析整个字符串。

答案 1

你可以使用 getComputedStyle（）。。

var element = document.getElementById('image_1'),
    style = window.getComputedStyle(element),
    top = style.getPropertyValue('top');
console.log(top);

<img id="image_1">

jsFiddle.

答案 2

element.style 属性仅允许您知道在该元素中定义为内联的 CSS 属性（以编程方式或在元素的样式属性中定义），您应该获得计算的样式。

以跨浏览器的方式做到这一点并不容易，IE有自己的方式，通过element.currentStyle属性，而DOM Level 2标准方式，由其他浏览器实现的就是通过document.defaultView.getComputedStyle方法。

这两种方式有区别，例如，IE element.currentStyle属性期望您访问由驼峰大小写中的两个或多个单词组成的CSS属性名称（例如maxHeight，fontSize，backgroundColor等），标准方式期望属性以破折号分隔的单词（例如.max高度，字体大小，背景色等）。......

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;
    }
}

主参考堆栈溢出