태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.

이벤트가 발생하는 곳
 onmouseover="menuOver(this)" onmouseout="menuOut(this)"


변경 값
   <script type="text/javascript">
    function menuOver(obj) {
        obj.style.border = "1px solid #82c800";
        }
    function menuOut(obj) {
        obj.style.border = "1px solid #333";
        }
      </script>







!important 로 지정한 스타일, 자바스크립트에서 덮어쓰기

      <style type="text/css">
        #test { color:red !important; }
      </style>

      <span id="test">HELLO</span>
      <script type="text/javascript">
        var oEl = document.getElementById("test");
        oEl.style.color = "blue";
      </script>


위의 코드의 경우, CSS 에서 !important 옵션을 주었기 때문에
자바스크립트에서 해당 엘리먼트의 CSS 를 변경해도 반영되지가 않는다.
(Language : html4strict)

 !important 보다 inline CSS 의 우선순위가 더 높은 줄 알고 있었는데 그게 아닌거다.



ㅡ-> 해결방법

cssText 속성을 사용 (Language : html4strict)

      <script type="text/javascript">
        function setCSS(oEl, sKey, sValue) {
           oEl.style.cssText += ';' + sKey + ':' + sValue + ' !important;';
        }
      </script>
      <style type="text/css">
        #test { color:red !important; }
      </style>
      <span id="test">HELLO</span>
      <script type="text/javascript">
        var oEl = document.getElementById('test');
        setCSS(oEl, 'color', 'blue');
      </script>



출처 - 블로그를 후리자 http://hooriza.com/

신고
Posted by 고시랑

티스토리 툴바