[JQUERY] jQuery를이 요소와 관련된 모든 CSS 스타일을받을 수 있습니까?

jQuery를이 요소와 관련된 모든 CSS 스타일을받을 수 있습니까?

해결법

1. ---

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

   :)

2. ---

   2.2 년 늦게,하지만 난 당신이 찾고있는 해결책을 가지고 있습니다. 원래 저자 형태로 신용을하고자하지, 여기에 내가 당신이 필요로하는 것에 대해 매우 잘 작동을 발견 플러그인하지만, 모든 브라우저에서도 IE를 가능한 모든 스타일을 가져옵니다.

   2 년 늦게,하지만 난 당신이 찾고있는 해결책을 가지고 있습니다. 원래 저자 형태로 신용을하고자하지, 여기에 내가 당신이 필요로하는 것에 대해 매우 잘 작동을 발견 플러그인하지만, 모든 브라우저에서도 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);
   }
   

   희망이 도움이.

3. ---

   3.왜 DOM 요소의 .style 사용하지? 이 같은 폭의 backgroundColor 같은 멤버를 포함하는 객체입니다.

   왜 DOM 요소의 .style 사용하지? 이 같은 폭의 backgroundColor 같은 멤버를 포함하는 객체입니다.

4. ---

   4.나는 많은 다른 솔루션을 시도했다. 이것은 직접 요소에 기인대로 클래스 수준에서 적용 스타일과 스타일에 픽업 할 수 있었다 나를 위해 일한 유일한 사람이었다. CSS 파일 레벨과 스타일 속성으로 하나의 글꼴 설정 그래서; 그것은 올바른 글꼴을 반환했습니다.

   나는 많은 다른 솔루션을 시도했다. 이것은 직접 요소에 기인대로 클래스 수준에서 적용 스타일과 스타일에 픽업 할 수 있었다 나를 위해 일한 유일한 사람이었다. 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];
   }
   

5. ---

   5.@ marknadal의 솔루션은 작동, 나는 의심 수행 적은 반복했다 () 나 (예를 들어 최대 폭)에 대한 하이픈 특성을 잡는하지만 css2json에서 루프 첫 번째 변경되지 않았습니다 :

   @ marknadal의 솔루션은 작동, 나는 의심 수행 적은 반복했다 () 나 (예를 들어 최대 폭)에 대한 하이픈 특성을 잡는하지만 css2json에서 루프 첫 번째 변경되지 않았습니다 :

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

   오히려보다 길이 통해 루프 getPropertyValue 통해 취득 ()보다 오히려와 toLowerCase ().

from https://stackoverflow.com/questions/754607/can-jquery-get-all-css-styles-associated-with-an-element by cc-by-sa and MIT license