js 스타일 속성 설정 (! import)

1. style 속성 직접 설정  어떤 경우 에는 이 설정 으로!important 값 이 잘못 되 었 습 니 다.
        속성 에 '-' 호가 있 으 면 낙타 봉 형식 으로 쓰 십시오 (예 를 들 어 textAlign) 보류 하고 싶 으 면 - 호, 괄호 형식 으로. element.style['text-align'] = '100px';

 element.style.height = '100px';

2. 속성 을 직접 설정 합 니 다 (일부 속성 에 만 사용 가능 하 며, 관련 스타일 은 자동 으로 식 별 됩 니 다)

element.setAttribute('height', 100);

element.setAttribute('height', '100px');

3. style 의 속성 설정

element.setAttribute('style', 'height: 100px !important');

4. setProperty 사용  설정 하려 면!important, 이 방법 으로 세 번 째 인 자 를 설정 하 는 것 을 추천 합 니 다. 속성 명 은 낙타 봉 으로 쓰 지 않 습 니 다.

element.style.setProperty('height', '300px', 'important');

5. 클래스 변경   예 를 들 어 JQ 의 클 라 스 변경 방법

 JS    css    ，              class           

element.className = 'blue';
element.className += 'blue fb';

6. cssText 설정

element.style.cssText = 'height: 100px !important'; 

element.style.cssText += 'height: 100px !important';

//        

7. 새로운 css 스타일 파일 만 들 기

 function addNewStyle(newStyle) {

    var styleElement = document.getElementById('styles_js'); 

         if (!styleElement) { 

              styleElement = document.createElement('style'); 
              styleElement.type = 'text/css'; 
              styleElement.id = 'styles_js'; 
              document.getElementsByTagName('head')[0].appendChild(styleElement); 

          } 

     styleElement.appendChild(document.createTextNode(newStyle)); 
  } 


addNewStyle('.box {height: 100px !important;}');

8. addRule, insertRule 사용

//         
  document.styleSheets[0].addRule('.box', 'height: 100px');   
                                                              document.styleSheets[0].insertRule('.box {height: 100px}', 0); //           

 var styleEl = document.createElement('style'), styleSheet = styleEl.sheet; 

 styleSheet.addRule('.box', 'height: 100px');

 styleSheet.insertRule('.box {height: 100px}', 0); 

 document.head.appendChild(styleEl);