Может ли jQuery получить все стили CSS, связанные с элементом?

Question

Есть ли способ в jQuery получить все CSS из существующего элемента и применить его к другому без перечисления их всех?

Я знаю, что это сработает, если они были атрибутом стиля с attr(), но все мои стили находятся во внешней таблице стилей.

Answer 1

пару лет поздно, но здесь это решение, которое извлекает как встроенный стиль и внешний стиль:

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 в $().css(), например:

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

:)

Answer 2

Почему бы не использовать .style of the DOM element? Это объект, который содержит элементы, такие как width и backgroundColor.

Answer 3

Два года поздно, но у меня есть решение, которое вы ищете. Не намереваясь взять кредит у original author, вот плагин, который я нашел, работает исключительно хорошо для того, что вам нужно, но получает все возможных стилей во всех браузерах, даже IE.

Предупреждение: Этот код генерирует много выходных данных и должен использоваться экономно. Он не только копирует все стандартные свойства 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); 
} 

Надежда, что помогает.

Answer 4

@ решение marknadal не хватало дефис свойства для меня (например, max-width), но изменить первую for петлю css2json() заставила его работать, и я подозреваю, выполняет меньше итераций:

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

Loops через length, а чем in, получает через getPropertyValue(), а не toLowerCase().

Answer 5

Я пробовал много разных решений. Это был единственный, который работал для меня в том смысле, что он смог подобрать стили, применяемые на уровне класса и в стиле, непосредственно связанные с элементом. Таким образом, шрифт устанавливается на уровне файла 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]; 
}