jQuery可以获得与元素相关的所有CSS样式吗？

5 回答

• 89

  几年后，这里有一个解决方案，可以检索内联样式和外部样式：

  function css(a) {
      var sheets = document.styleSheets, o = {};
      for (var i in sheets) {
          var rules = sheets[i].rules || sheets[i].cssRules;
          for (var r in rules) {
              if (a.is(rules[r].selectorText)) {
                  o = $.extend(o, css2json(rules[r].style), css2json(a.attr('style')));
              }
          }
      }
      return o;
  }
  
  function css2json(css) {
      var s = {};
      if (!css) return s;
      if (css instanceof CSSStyleDeclaration) {
          for (var i in css) {
              if ((css[i]).toLowerCase) {
                  s[(css[i]).toLowerCase()] = (css[css[i]]);
              }
          }
      } else if (typeof css == "string") {
          css = css.split("; ");
          for (var i in css) {
              var l = css[i].split(": ");
              s[l[0].toLowerCase()] = (l[1]);
          }
      }
      return s;
  }
  

  将一个jQuery对象传递给 css() ，它将返回一个对象，然后您可以将其插回到jQuery的_720449中，例如：

  var style = css($("#elementToGetAllCSS"));
  $("#elementToPutStyleInto").css(style);
  

  :)

  回复于 2024-04-28T12:09:35+08:00
• 329

  迟了两年，但我有你想要的解决方案 . 不打算从original author获取信用，这里是一个插件，我发现它非常适合你需要的东西，但在所有浏览器中都可以获得 all 样式，甚至是IE .

  Warning: 此代码生成大量输出，应谨慎使用 . 它不仅复制所有标准CSS属性，还复制该浏览器的所有供应商CSS属性 .

  jquery.getStyleObject.js:

  /*
   * getStyleObject Plugin for jQuery JavaScript Library
   * From: http://upshots.org/?p=112
   */
  
  (function($){
      $.fn.getStyleObject = function(){
          var dom = this.get(0);
          var style;
          var returns = {};
          if(window.getComputedStyle){
              var camelize = function(a,b){
                  return b.toUpperCase();
              };
              style = window.getComputedStyle(dom, null);
              for(var i = 0, l = style.length; i < l; i++){
                  var prop = style[i];
                  var camel = prop.replace(/\-([a-z])/g, camelize);
                  var val = style.getPropertyValue(prop);
                  returns[camel] = val;
              };
              return returns;
          };
          if(style = dom.currentStyle){
              for(var prop in style){
                  returns[prop] = style[prop];
              };
              return returns;
          };
          return this.css();
      }
  })(jQuery);
  

  基本用法非常简单，但他也为此编写了一个函数：

  $.fn.copyCSS = function(source){
    var styles = $(source).getStyleObject();
    this.css(styles);
  }
  

  希望有所帮助 .

  回复于 2024-04-28T12:09:35+08:00
• 17

  为什么不使用.style of the DOM element？它是一个包含 width 和 backgroundColor 等成员的对象 .

  回复于 2024-04-28T12:09:35+08:00
• 9

  我尝试了很多不同的解决方案 . 这是唯一一个对我有用的东西，因为它能够在类级别和样式上应用直接归因于元素的样式 . 所以字体设置在css文件级别，一个字体设置为样式属性;它返回了正确的字体 .

  很简单！ （对不起，找不到我原来找到的地方）

  //-- html object
  var element = htmlObject; //e.g document.getElementById
  //-- or jquery object
  var element = htmlObject[0]; //e.g $(selector)
  
  var stylearray = document.defaultView.getComputedStyle(element, null);
  var font = stylearray["font-family"]
  

  或者，您可以通过循环遍历阵列列出所有样式

  for (var key in stylearray) {
  console.log(key + ': ' + stylearray[key];
  }
  

  回复于 2024-04-28T12:09:35+08:00
• 4

  @marknadal 's solution wasn' t为我抓取带连字符的属性（例如 max-width ），但更改 css2json() 中的第一个 for 循环使其工作，我怀疑执行的迭代更少：

  for (var i = 0; i < css.length; i += 1) {
      s[css[i]] = css.getPropertyValue(css[i]);
  }
  

  循环通过 length 而不是 in, 通过 getPropertyValue() 而不是 toLowerCase(). 检索

  回复于 2024-04-28T12:09:35+08:00