자바 스크립트를 사용하여 CSS 클래스에 액세스

Question

외부 또는 포함 된 스타일 시트를 사용하여 지정된 요소의 스타일 선언에 액세스하려면 어떻게해야합니까? 예 : id 선택기를 사용하여 포함 된 스타일 시트에 정의 된 요소의 width 속성에 액세스하는 방법 CSSRules 객체가이 작업을 수행 할 수 있다는 것을 알고 있지만 ... 브라우저 의존성입니다. 예 : 크롬에서는 객체가 null입니다. 이렇게 브라우저 독립적 인 방법은 무엇입니까?

Answer 1

입니다 ... 나는에 사용하는 코드의 비트 there 코드에서 수정 된 자동 확장 텍스트 영역을 만드십시오.

여기에서 $ 기능은 Prototype입니다.

function getStyleFromCss(el, style) { 
    /* Hack required by IE */ 
    var value = $(el).getStyle(style); 
    if (!value) { 
     /* For other browsers. Actually this equals 'window'. Use that 
     * if Opera fails on you. */ 
     if(document.defaultView) { 
      value = document.defaultView.getComputedStyle(el, null). 
       getPropertyValue(style); 
      // for IE 
     } else if(el.currentStyle) { 
      value = el.currentStyle[style]; 
     } 
    } 
    if(value.length > 0){ 
     /* if the value returned has the word px in it, we check for 
     * the letter x */ 
     if (value.charAt(value.length-1) == "x") { 
      value = parseInt(value.substring(0, value.length-2)); 
     } 
    } 
    return value; 
} 

프로토 타입에서 getStyle() 기능이 방법을 정의, 당신은 쉽게 당신의 필요에 적응 할 수 있어야한다.

getStyle: function(element, style) { 
    element = $(element); 
    style = style == 'float' ? 'cssFloat' : style.camelize(); 
    var value = element.style[style]; 
    if (!value || value == 'auto') { 
    var css = document.defaultView.getComputedStyle(element, null); 
    value = css ? css[style] : null; 
    } 
    if (style == 'opacity') return value ? parseFloat(value) : 1.0; 
    return value == 'auto' ? null : value; 
}, 

Answer 2

IE9 이전의 IE와 다른 모든 브라우저에서 다르게 적용되는 경우입니다. 스타일 시트에서 개체에 적용되는 어떤을 포함하여 객체의 현재 스타일을 얻으려면, 당신은 같은 것을 사용할 수 있습니다 :이 의존하는 브라우저가 정말

function getStyle(el, cssprop) { 
    if (document.defaultView && document.defaultView.getComputedStyle) 
     return document.defaultView.getComputedStyle(el, null)[cssprop]; 
    else //IE 
     return el.currentStyle[cssprop]; 
}