HTML
Javascript
Flash Actionscript
PHP
mySQL
ASP
MS-SQL
Linux
Others
Ziwoo Board
Portfolio
About
Javascript
작성  2011-12-15 11:40:19   추천: 58   조회: 23257
제목  자바스크립트로 스타일 제어하기
이름(ID)  지우 (ziwoo)
[예제1]
<head>
    <style id="myStyle">
        .red {
            color: red;
        }
    </style>

    <script type="text/javascript">
        function GetSelector () {
            var styleTag = document.getElementById ("myStyle");

                // the style sheet in the style tag
            var sheet = styleTag.sheet ? styleTag.sheet : styleTag.styleSheet;

                // the first rule in the style sheet
            var rules = sheet.cssRules ? sheet.cssRules : sheet.rules;
            var firstRule = rules[0];

            alert (firstRule.selectorText);
        }
    </script>
</head>
<body>
    <button onclick="GetSelector ()">Get the selector component!</button>
    <br /><br />
    <div class="red">red division</div>
    <div>non-red division</div>
    <span class="red">red span</span>
</body>


[예제2]
<head>
    <style id="myStyle">
        .red {
            color: red;
        }
    </style>
    <script type="text/javascript">
        function ChangeRedColor () {
            var styleTag = document.getElementById ("myStyle");

                // the style sheet in the style tag
            var sheet = styleTag.sheet ? styleTag.sheet : styleTag.styleSheet;
           
                // the first rule in the style sheet
            var rules = sheet.cssRules ? sheet.cssRules : sheet.rules;
            var firstRule = rules[0];

                // change the color
            firstRule.style.color = "#00ff00";
        }
    </script>
</head>
<body>
    <button onclick="ChangeRedColor ()">Change the color of the '.red' style rule!</button>
    <br /><br />
    <div class="red">red division</div>
    <div>non-red division</div>
    <span class="red">red span</span>
</body>


[예제3]
<head>
    <link id="myLink" rel="stylesheet" type="text/css" href="red.css" />
    <script type="text/javascript">
        function ChangeRedColor () {
            var linkTag = document.getElementById ("myLink");

                // the imported style sheet
            var importedSheet = linkTag.sheet ? linkTag.sheet : linkTag.styleSheet;
   
                // the first rule in the style sheet
            var rules = importedSheet.cssRules ? importedSheet.cssRules : importedSheet.rules;
            var firstRule = rules[0];

                // change the color
            firstRule.style.color = "#00ff00";
        }
    </script>
</head>
<body>
    <button onclick="ChangeRedColor ()">Change the color of the '.red' style rule!</button>
    <br /><br />
    <div class="red">red division</div>
    <div>non-red division</div>
    <span class="red">red span</span>
</body>
번호 제목 이름 날짜 추천 조회
중요 위지윅(WYSIWYG) 웹에디터 입니다.[28]파일 지우 2006-09-23 141 19946
55 제이쿼리(JQuery)를 활용한 라디오, 체크박.. 지우 2017-07-05 15 3636
54 최근 메일서비스 리스트 지우 2016-06-26 16 7634
53 IE 버전 구분 정규식 지우 2013-07-07 36 8066
52 자바스크립트로 스타일 제어하기 지우 2011-12-15 58 23257
51 attachEvent, addEventListener 활용 지우 2011-12-07 41 8442
50 Drag&Drop을 이용한 진열순서 변경파일 지우 2011-11-19 49 27074
49 비밀번호 입력형식 변환 지우 2011-11-16 29 2585
48 페이드 효과 및 로테이션파일 지우 2011-11-10 29 2991
47 이메일 유효성 정규식 - 자바스크립트 지우 2011-06-03 40 3832
46 < tab1 tab2 tab3 tab4 tab5 >[3] 大道 2011-02-05 37 3562
45 함수명을 변수로 해야할 때 지우 2010-04-11 52 5050
44 달력 - 날짜입력기(Date Picker)파일 지우 2010-04-11 62 16337
43 중앙정렬 홈페이지에 레이어 좌표맞추기 지우 2009-12-10 69 3662
42 자바스크립트 이벤트 핸들러 (Event Handl.. 지우 2009-11-13 53 3179
41 날짜 더하기 & 시간 더하기 함수 지우 2009-10-31 56 9432
40 동적테이블 TR 추가 지우 2009-10-31 57 3299
39 IE 설계변경 패치 했는데요...왜 안되는지...[2]파일 최혜경 2008-06-11 68 4778
38 지우님... 도와주세요.. ㅜ_ㅜ[2] 김영필 2008-01-11 78 3217
37 정규식이용 특정문자만 변환 (콜백함수 사.. 지우 2007-08-25 89 5676
[1][2][3]
제목 내용 이름  
ziwooboard v1.0
Contact Phone Number
Bank Account number
ns1.ziwoo.net (211.115.222.24)
ns2.ziwoo.net (211.115.222.24)
Naver BLOG : http://blog.ziwoo.net
Family Homepage : http://home.ziwoo.net
Copyright ⓒ 2006 By Ziwoo.net All right reserved. Administrator.ziwoonet@naver.com