Javascript CSS 제어

브라우저에서 지원하는 CSS 속성을 가져오면 빈 문자열을 받고, 지원하지 않는 속성을 가져오려고 하면 null 응답을 받게 된다. 다음 처럼 typeof 결과가 “string”인지 확인한다.

var element = document.documentElement;
var style = element.style;
if (style && typeof style.columnCount === "string") {
  // columnCount CSS를 지원할 때 하는 작업
}

• Getting All CSS Properties of a DOM Element in Pure JavaScript
• Computed Style

  function getComputedStyle( dom ) {
      var style;
      var returns = {};
      // FireFox and Chrome way
      if(window.getComputedStyle){
          style = window.getComputedStyle(dom, null);
          for(var i = 0, l = style.length; i < l; i++){
              var prop = style[i];
              var val = style.getPropertyValue(prop);
              returns[prop] = val;
          }
          return returns;
      }
      // IE and Opera way
      if(dom.currentStyle){
          style = dom.currentStyle;
          for(var prop in style){
              returns[prop] = style[prop];
          }
          return returns;
      }
      // Style from style attribute
      if(style = dom.style){
          for(var prop in style){
              if(typeof style[prop] != 'function'){
                  returns[prop] = style[prop];
              }
          }
          return returns;
      }
      return returns;
  };