Question

以下是使用jQuery获取一个css属性的方法：

$('someObject').css('attribute')

你如何得到它们？（没有指定，最好是以下格式，以便以后可以用jQuery重新应用）：

    cssObj = {
        'overflow':'hidden',
        'height':'100%',
        'position':'absolute',
    }

谢谢！

修改

我试图获取的方法在样式表中声明（它们不是内联的）。很抱歉没有指定。

Answer 1

使用jQuery属性选择器

查看此live example

$(document).ready(function() {
    alert($("#stylediv").attr('style'));
});

Answer 2

这样的事情：

jQuery CSS plugin that returns computed style of element to pseudo clone that element?

这很难看，但它似乎适用于海报......

这也可能有趣： https://developer.mozilla.org/en/DOM:window.getComputedStyle

Answer 3

不确定这是一个跨浏览器，但它适用于Chrome -

https://gist.github.com/carymrobbins/223de0b98504ac9bd654

var getCss = function(el) {
    var style = window.getComputedStyle(el);
    return Object.keys(style).reduce(function(acc, k) {
        var name = style[k],
            value = style.getPropertyValue(name);
        if (value !== null) {
            acc[name] = value;
        }
        return acc;
    }, {});
};

Answer 4

window.getComputedStyle（元件）;

// For example
var element = document.getElementById('header');
window.getComputedStyle(element);

Answer 5

对于无法使用Chrome或Safari DevTools / WebInspector的平台（名称不公开），您需要将样式转储到日志中。

  dumpCssFromId (id) {
    const el = document.getElementById(id);
    const styles = window.getComputedStyle(el);
    return Object.keys(styles).forEach((index) => {
      const value = styles.getPropertyValue(index);
      if (value !== null  && value.length > 0) {
        console.log(`style dump for ${id} - ${index}: ${value}`);
      }
    }, {});
  }

使用jQuery获取* all * CSS属性

5 个答案: