[JQUERY] 어떻게 자바 스크립트 / jQuery를하여 CSS 클래스에서 스타일 속성을 얻으려면?

어떻게 자바 스크립트 / jQuery를하여 CSS 클래스에서 스타일 속성을 얻으려면?

해결법

1. ---

   1.나는 일치 선택, 다음 스타일을 찾고 문서에 스타일 시트를 가로 지르는 작은 함수를 썼다.

   나는 일치 선택, 다음 스타일을 찾고 문서에 스타일 시트를 가로 지르는 작은 함수를 썼다.

   하나주의해야 할 점은있다,이 동일한 도메인에서 스타일 태그, 또는 외부 시트로 정의 스타일 시트에 대한 작동합니다.

   시트가 알려진 경우가 여러 장에 모습을 가지고에서 자신과 저장을 전달할 수 있습니다 (빨리 당신이 규칙을 충돌 한 경우가 더 정확한입니다).

   나는 일부 약한 테스트 케이스와 jsFiddle에 시험이 당신을 위해 작동하는지 알려주세요.

   function getStyleRuleValue(style, selector, sheet) {
       var sheets = typeof sheet !== 'undefined' ? [sheet] : document.styleSheets;
       for (var i = 0, l = sheets.length; i < l; i++) {
           var sheet = sheets[i];
           if( !sheet.cssRules ) { continue; }
           for (var j = 0, k = sheet.cssRules.length; j < k; j++) {
               var rule = sheet.cssRules[j];
               if (rule.selectorText && rule.selectorText.split(',').indexOf(selector) !== -1) {
                   return rule.style[style];
               }
           }
       }
       return null;
   }
   

   사용 예 :

   var color = getStyleRuleValue('color', '.foo'); // searches all sheets for the first .foo rule and returns the set color style.
   
   var color = getStyleRuleValue('color', '.foo', document.styleSheets[2]); 
   

   나는 고려 그룹화 규칙에 걸릴 무시. 나는이에 선택 체크를 변경 :

   if (rule.selectorText.split(',').indexOf(selector) !== -1) {
   

   지금은 그룹화 규칙 경기에서 선택기의 경우 하나를 확인합니다.

2. ---

   2.이미 jQuery를 사용하고 있기 때문에이 새로운 색상으로 애니메이션을 허용 할 것 jQuery를-UI의 기능 switchClass를 사용해보십시오.

   이미 jQuery를 사용하고 있기 때문에이 새로운 색상으로 애니메이션을 허용 할 것 jQuery를-UI의 기능 switchClass를 사용해보십시오.

   예를 들면 :

    $('div').switchClass( "", "highlight", 1000 );
   

   데모

   경우 당신은 여기에 전체 UI 라이브러리는 그들이 사용하는 코드는 포함하지 않는다 :

   switchClass: function( remove, add, speed, easing, callback) {
       return $.effects.animateClass.call( this, {
           add: add,
           remove: remove
       }, speed, easing, callback );
   }
   

   그리고 animateClass의 FN :

   var classAnimationActions = [ "add", "remove", "toggle" ],
       shorthandStyles = {
           border: 1,
           borderBottom: 1,
           borderColor: 1,
           borderLeft: 1,
           borderRight: 1,
           borderTop: 1,
           borderWidth: 1,
           margin: 1,
           padding: 1
       };
   function styleDifference( oldStyle, newStyle ) {
       var diff = {},
           name, value;
   
   
   
   
       for ( name in newStyle ) {
           value = newStyle[ name ];
           if ( oldStyle[ name ] !== value ) {
               if ( !shorthandStyles[ name ] ) {
                   if ( $.fx.step[ name ] || !isNaN( parseFloat( value ) ) ) {
                       diff[ name ] = value;
                   }
               }
           }
       }
   
   
   
   
       return diff;
   }
   function getElementStyles( elem ) {
       var key, len,
           style = elem.ownerDocument.defaultView ?
               elem.ownerDocument.defaultView.getComputedStyle( elem, null ) :
               elem.currentStyle,
           styles = {};
   
   
   
   
       if ( style && style.length && style[ 0 ] && style[ style[ 0 ] ] ) {
           len = style.length;
           while ( len-- ) {
               key = style[ len ];
               if ( typeof style[ key ] === "string" ) {
                   styles[ $.camelCase( key ) ] = style[ key ];
               }
           }
       // support: Opera, IE <9
       } else {
           for ( key in style ) {
               if ( typeof style[ key ] === "string" ) {
                   styles[ key ] = style[ key ];
               }
           }
       }
   
   
   
   
       return styles;
   }
   $.effects.animateClass = function( value, duration, easing, callback ) {
       var o = $.speed( duration, easing, callback );
   
       return this.queue( function() {
           var animated = $( this ),
               baseClass = animated.attr( "class" ) || "",
               applyClassChange,
               allAnimations = o.children ? animated.find( "*" ).addBack() : animated;
   
           // map the animated objects to store the original styles.
           allAnimations = allAnimations.map(function() {
               var el = $( this );
               return {
                   el: el,
                   start: getElementStyles( this )
               };
           });
   
           // apply class change
           applyClassChange = function() {
               $.each( classAnimationActions, function(i, action) {
                   if ( value[ action ] ) {
                       animated[ action + "Class" ]( value[ action ] );
                   }
               });
           };
           applyClassChange();
   
           // map all animated objects again - calculate new styles and diff
           allAnimations = allAnimations.map(function() {
               this.end = getElementStyles( this.el[ 0 ] );
               this.diff = styleDifference( this.start, this.end );
               return this;
           });
   
           // apply original class
           animated.attr( "class", baseClass );
   
           // map all animated objects again - this time collecting a promise
           allAnimations = allAnimations.map(function() {
               var styleInfo = this,
                   dfd = $.Deferred(),
                   opts = $.extend({}, o, {
                       queue: false,
                       complete: function() {
                           dfd.resolve( styleInfo );
                       }
                   });
   
               this.el.animate( this.diff, opts );
               return dfd.promise();
           });
   
           // once all animations have completed:
           $.when.apply( $, allAnimations.get() ).done(function() {
   
               // set the final class
               applyClassChange();
   
               // for each animated element,
               // clear all css properties that were animated
               $.each( arguments, function() {
                   var el = this.el;
                   $.each( this.diff, function(key) {
                       el.css( key, "" );
                   });
               });
   
               // this is guarnteed to be there if you use jQuery.speed()
               // it also handles dequeuing the next anim...
               o.complete.call( animated[ 0 ] );
           });
       });
   };
   

   필요한 모든 기능 바이올린 작업 : http://jsfiddle.net/maniator/3C5ZQ/

3. ---

   3.이것은 어떤가요?

   이것은 어떤가요?

   $('<span class="highlight"></span>').appendTo('body');
   $(this).animate({
       color: $('.highlight').css('color')
   }, 750);
   $('.highlight').remove();
   

   그것은 더러운의 종류의하지만 당신이 찾고있는에 대한 CSS 값을 얻을 수있는 기준에 (빈)의 요소를 제공 할 것입니다.

   CSS 파서 / abstracter에서 괜찮은 솔루션은 다음 업데이트입니까? 객체에 스타일 시트를 변환하는 방법

   function findColorProperty(selector) {
       rules = document.styleSheets[0].cssRules
       for(i in rules) {
           //if(rules[i].selectorText==selector) 
               //return rules[i].cssText; // Original
           if(rules[i].selectorText == selector) 
               return rules[i].style.color; // Get color property specifically
       }
       return false;
   }
   

   용법

   $(this).animate({
       color: findColorProperty('.highlight')
   }, 750);
   

   여기에 바이올린 http://jsfiddle.net/wzXDx/1/이다. 나는 인해 환경의 임베디드 특성으로 바이올린의 작업이를 얻기 위해 스타일 시트 [1]를 사용했다.

4. ---

   4.내 마음에 와서 유일한 해결책은 다음과 같다 :

   내 마음에 와서 유일한 해결책은 다음과 같다 :

   //이 클래스와 요소를 생성하고이 DOM에 추가 VAR eleToGetColor = $ ( '

   '). appendTo ( '몸'); // 요소의 색상을 얻을 VAR 색 eleToGetColor.css = ( '색상'); // completly는 DOM에서 요소를 제거 eleToGetColor.remove (); $ ( "DIV"). 애니메이션 ({ // 새로운 색상을 설정 색상 : 색상, } 1000); .highlight { 색상 : 빨강; } DIV { 폭 : 200 픽셀; 높이 : 100 픽셀; 파란색; 폰트 크기 : 6em; 폰트 중량 : 굵은; } <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> <링크 REL = "스타일"HREF = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css"/> <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js">

   테스트

5. ---

   5.난 그냥이 기능은 선택에 의해 모든 스타일을 얻을 작성했습니다. 주의 사항 : 선택은 CSS에서와 동일해야합니다.

   난 그냥이 기능은 선택에 의해 모든 스타일을 얻을 작성했습니다. 주의 사항 : 선택은 CSS에서와 동일해야합니다.

       /**
        * Gets styles by a classname
        * 
        * @notice The className must be 1:1 the same as in the CSS
        * @param string className_
        */
       function getStyle(className_) {
   
           var styleSheets = global_.document.styleSheets;
           var styleSheetsLength = styleSheets.length;
           for(var i = 0; i < styleSheetsLength; i++){
               var classes = styleSheets[i].rules || styleSheets[i].cssRules;
               var classesLength = classes.length;
               for (var x = 0; x < classesLength; x++) {
                   if (classes[x].selectorText == className_) {
                       var ret;
                       if(classes[x].cssText){
                           ret = classes[x].cssText;
                       } else {
                           ret = classes[x].style.cssText;
                       }
                       if(ret.indexOf(classes[x].selectorText) == -1){
                           ret = classes[x].selectorText + "{" + ret + "}";
                       }
                       return ret;
                   }
               }
           }
   
       }
   

6. ---

   6.여기에 또 다른 방법입니다 : 적용된 클래스 숨겨진 DIV를 추가합니다. jQuery.css 사용하면 스타일 값을 검색합니다. 그런 요소를 제거합니다.

   여기에 또 다른 방법입니다 : 적용된 클래스 숨겨진 DIV를 추가합니다. jQuery.css 사용하면 스타일 값을 검색합니다. 그런 요소를 제거합니다.

   http://plnkr.co/edit/Cu4lPbaJWHW42vgsk9ey

   function getStyleValue(className, style) {
     var elementId = 'test-' + className,
       testElement = document.getElementById(elementId),
       val;
   
     if (testElement === null) {
       testElement = document.createElement('div');
       testElement.className = className;
       testElement.style.display = 'none';
       document.body.appendChild(testElement);
     }
   
     val = $(testElement).css(style);
     document.body.removeChild(testElement);
     return val;
   }
   
   console.log( 'The style value is ' + getStyleValue('dark-red', 'color') );
   

7. ---

   7.왜 제거 IT와 애니메이션에 비해 캐시 색상, 색상 스타일을 캐시 .highlighted 클래스를 추가하지 마십시오? 즉 할 요소를 추가하지 및 구문 분석 및 루프 스타일하지 않습니다.

   왜 제거 IT와 애니메이션에 비해 캐시 색상, 색상 스타일을 캐시 .highlighted 클래스를 추가하지 마십시오? 즉 할 요소를 추가하지 및 구문 분석 및 루프 스타일하지 않습니다.

   jsfiddle 예

   var에 $ 요소 = $ ( '내 수준.') addClass는 ( '강조.'); VAR colorToAnimate = $ element.css ( '색상'); $ element.removeClass ( '강조'); 경고 (colorToAnimate); .내 수업 { 파란색; } .highlighted { 색상 : 빨강; } <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> <스팬 클래스 = "내 클래스"> 애니메이션 컬러 텍스트

8. ---

   8.(CSS 클래스를 여러 번 선언하고 첫 번째 선언은 당신이 찾고있는 스타일이없는 경우) 불행하게도 나는이 멋진 대답에 대해 언급하지만, 음식을 장만하지 않는 경우를 찾을 수 없습니다하는 jsFiddle를 제작 그것을 수용 :

   (CSS 클래스를 여러 번 선언하고 첫 번째 선언은 당신이 찾고있는 스타일이없는 경우) 불행하게도 나는이 멋진 대답에 대해 언급하지만, 음식을 장만하지 않는 경우를 찾을 수 없습니다하는 jsFiddle를 제작 그것을 수용 :

   function getStyleRuleValue(style, selector, sheet) {
     var sheets = typeof sheet !== 'undefined' ? [sheet] : document.styleSheets;
     for (var i = 0, l = sheets.length; i < l; i++) {
       var sheet = sheets[i];
       if( !sheet.cssRules ) { continue; }
       for (var j = 0, k = sheet.cssRules.length; j < k; j++) {
         var rule = sheet.cssRules[j];
         if (rule.selectorText && rule.selectorText.indexOf(selector) !== -1 && rule.style[style] !== '') {
           return rule.style[style];
         }
       }
     }
     return null;
   }
   

   또한, 조건, 필요하지의 분할을했고 지금은 스타일이 규칙의 존재가 확인에 있는지 확인합니다.

   단지에 대한 shigiggles을 선택하여 스타일을 캐시하는 jsFiddle을 만들어 :

   var styleCache = {};
   
   function getStyleRuleValue(style, selector, sheet) {
     if (typeof styleCache[selector] !== 'undefined') {
       if (typeof styleCache[selector][style] !== 'undefined') {
           return styleCache[selector][style];
       }
     }
     else {
       styleCache[selector] = {};
     }
   
     var sheets = typeof sheet !== 'undefined' ? [sheet] : document.styleSheets;
     for (var i = 0, l = sheets.length; i < l; i++) {
       var sheet = sheets[i];
       if( !sheet.cssRules ) { continue; }
       for (var j = 0, k = sheet.cssRules.length; j < k; j++) {
         var rule = sheet.cssRules[j];
         if (rule.selectorText && rule.selectorText.indexOf(selector) !== -1 && rule.style[style] !== '') {
           return styleCache[selector][style] = rule.style[style];
         }
       }
     }
     return null;
   }
   

   당신이 그것을 사용하는 경우이지만, 나는 폐쇄 / 클래스에 넣어 제안했다. 덕분에 다시 멋진 원본에 대한 rlemon합니다.

from https://stackoverflow.com/questions/16965515/how-to-get-a-style-attribute-from-a-css-class-by-javascript-jquery by cc-by-sa and MIT license