카테고리 없음

스타일시트접근법

psys 2020. 7. 1. 09:53
728x90
내외부 스타일시트 접근법은 일반적인 회사에서는 사용되지않고 
전문프론트엔드 컴포넌트나 라이브러리를 만드는 회사에서 사용되고 있다.

 

내외부스타일시트 접근

내외부스타일 구분없이 맨 위에것부터 0번!

link가 0, psy가 1, link가 2, csj가 3

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/myStyle.css">
    <title>Document</title>
    <style>
        .psy {
            background-color: teal;
        }
    </style>
    <link rel="stylesheet" href="css/myStyle.css">
    <style>
        .csj {
            background-color: pink;
        }
    </style>
</head>

<body>
    <input type="button" value="내외부스타일시트 접근" onclick="f_style()">
    <script>
        function f_style() {
            // alert(document.styleSheets[0]);//맨 위에것 접근
            alert(document.styleSheets[0].cssRules[0]);
        }
    </script>
</body>

</html>

 

더보기 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/myStyle.css">
    <title>Document</title>
    <style>
        .psy {
            background-color: teal;
        }
    </style>
    <link rel="stylesheet" href="css/myStyle.css">
    <style>
        .csj {
            background-color: pink;
        }
    </style>
</head>

<body>
    <input type="button" value="내외부스타일시트 접근" onclick="f_style()">
    <script>
        function f_style() {
            alert(document.styleSheets[0]);//맨 위에것 접근
        }
    </script>
</body>

</html>

 

cssRules

Rules는 옛날것!!쓰지말자!

        .psy {
            background-color: teal;
        }

이거 하나하나를 cssRules라 부름

 

        document.styleSheets[1].cssRules[0].style.backgroundColor

1번째의 0번째것의 색은 teal

2번째의 0번째것의  색은 pink

더보기 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/myStyle.css">
    <title>Document</title>
    <style>
        .psy {
            background-color: teal;
        }
    </style>
    <link rel="stylesheet" href="css/myStyle.css">
    <style>
        .csj {
            background-color: pink;
        }
    </style>
</head>

<body>
    <input type="button" value="내외부스타일시트 접근" onclick="f_style()">
    <script>
        function f_style() {
            // alert(document.styleSheets[0]);//맨 위에것 접근
            alert(document.styleSheets[1].cssRules[0].style.backgroundColor);
        }
    </script>
</body>

</html>

 

 

    <style>
        /* cssRules[0] */
        .psy {
            background-color: teal;
        }

        /* cssRules[1] */
        .psy {
            color: tomato;
        }
    </style>
더보기 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/myStyle.css">
    <title>Document</title>
    <style>
        /* cssRules[0] */
        .psy {
            background-color: teal;
        }

        /* cssRules[1] */
        .psy {
            color: tomato;
        }
    </style>
    <link rel="stylesheet" href="css/myStyle.css">
    <style>
        .csj {
            background-color: pink;
        }
    </style>
</head>

<body>
    <input type="button" value="내외부스타일시트 접근" onclick="f_style()">
    <script>
        function f_style() {
            // alert(document.styleSheets[0]);//맨 위에것 접근
            alert(document.styleSheets[1].cssRules[1].style.color);
        }
    </script>
</body>

</html>

 

폰트크기 출력

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* cssRules [0] */
        .psy {
            background-color: teal;
        }

        /* cssRules [1] */
        .psy {
            color: tomato;
        }
    </style>
    <link rel="stylesheet" href="css/myStyle.css">
    <style>
        .csj {
            font-size: 2em;
            background-color: pink;
        }
    </style>
</head>

<body>
    <input type=button value="내외부스타일시트 접근" onclick="f_style()">
    <script>
        // 내외부 스타일시트 접근법은 일반전인 회사에서는 사용되지 않고
        // 전문 프론트엔트 컴포넌트나 라이브러리를 만드는 회사에서 사용되고 있음
        function f_style() {
            alert(document.styleSheets[2].cssRules[0].style.fontSize);
        }
    </script>
</body>

</html>

 

cssRule밑으로 속성 3개를 많이 사용 cssText, selectorText, style

1. cssText (규칙 전체 내용)

내용 전체가 출력!

        alert(document.styleSheets[2].cssRules[0].cssText);
더보기 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* cssRules [0] */
        .psy {
            background-color: teal;
        }

        /* cssRules [1] */
        .psy {
            color: tomato;
        }
    </style>
    <link rel="stylesheet" href="css/myStyle.css">
    <style>
        .csj {
            font-size: 2em;
            background-color: pink;
        }
    </style>
</head>

<body>
    <input type=button value="내외부스타일시트 접근" onclick="f_style()">
    <script>
        // 내외부 스타일시트 접근법은 일반전인 회사에서는 사용되지 않고
        // 전문 프론트엔트 컴포넌트나 라이브러리를 만드는 회사에서 사용되고 있음
        // cssRules밑으로 속성 3개를 많이 사용 cssText,selectorText,style
        function f_style() {
            alert(document.styleSheets[2].cssRules[0].cssText);
        }
    </script>
</body>

</html>

2. selectorText (선택자)

            alert(document.styleSheets[2].cssRules[0].selectorText);

제대로 접근 했는가?를 파악하기 위해 많이 사용

더보기 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* cssRules [0] */
        .psy {
            background-color: teal;
        }

        /* cssRules [1] */
        .psy {
            color: tomato;
        }
    </style>
    <link rel="stylesheet" href="css/myStyle.css">
    <style>
        .csj {
            font-size: 2em;
            background-color: pink;
        }
    </style>
</head>

<body>
    <input type=button value="내외부스타일시트 접근" onclick="f_style()">
    <script>
        // 내외부 스타일시트 접근법은 일반전인 회사에서는 사용되지 않고
        // 전문 프론트엔트 컴포넌트나 라이브러리를 만드는 회사에서 사용되고 있음
        // cssRules밑으로 속성 3개를 많이 사용 cssText,selectorText,style
        function f_style() {
            // 규칙 전체 내용
            alert(document.styleSheets[2].cssRules[0].cssText);
            // 선택자
            alert(document.styleSheets[2].cssRules[0].selectorText);
        }
    </script>
</body>

</html>

3. style

            alert(document.styleSheets[1].cssRules[2].style.color);

외부스타일의 2번째것의 색상

더보기

<myStyle.css>

.fgPink {
    color: pink;
}

.fgPing {
    color: palevioletred;
}

.fgYello {
    color: yellow;
}

.fgBlue {
    color: blue;
}

.bgPink {
    background-color: pink;
}

.bgYello {
    background-color: yellow;
}

.bgBlue {
    background-color: blue;
}

.bgPing {
    background-color: palevioletred;
}

<스타일시트접근법.html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* cssRules [0] */
        .psy {
            background-color: teal;
        }

        /* cssRules [1] */
        .psy {
            color: tomato;
        }
    </style>
    <link rel="stylesheet" href="css/myStyle.css">
    <style>
        .csj {
            font-size: 2em;
            background-color: pink;
        }
    </style>
</head>

<body>
    <input type=button value="내외부스타일시트 접근" onclick="f_style()">
    <script>
        // 내외부 스타일시트 접근법은 일반전인 회사에서는 사용되지 않고
        // 전문 프론트엔트 컴포넌트나 라이브러리를 만드는 회사에서 사용되고 있음
        // cssRules밑으로 속성 3개를 많이 사용 cssText,selectorText,style
        function f_style() {
            // 규칙 전체 내용
            // alert(document.styleSheets[2].cssRules[0].cssText);
            // 선택자
            // alert(document.styleSheets[2].cssRules[0].selectorText);
            alert(document.styleSheets[1].cssRules[2].style.color);
        }
    </script>
</body>

</html>

 

버튼 눌러서 색깔 변경

myStyle값 변경

1) div넣기

        div {
            display: inline-block;
            width: 100px;
            height: 100px;
        }
    </style>
</head>

<body>
    <div class="bgYello"></div>

2) 외부스타일의 5번째것의 배경색을 토마토로 변경하라

            document.styleSheets[1].cssRules[5].style.backgroundColor = "tomato";
더보기 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* cssRules [0] */
        .psy {
            background-color: teal;
        }

        /* cssRules [1] */
        .psy {
            color: tomato;
        }
    </style>
    <link rel="stylesheet" href="css/myStyle.css">
    <style>
        .csj {
            font-size: 2em;
            background-color: pink;
        }

        div {
            display: inline-block;
            width: 100px;
            height: 100px;
        }
    </style>
</head>

<body>
    <div class="bgYello"></div><br>
    <input type=button value="내외부스타일시트 접근" onclick="f_style()">
    <script>
        // 내외부 스타일시트 접근법은 일반전인 회사에서는 사용되지 않고
        // 전문 프론트엔트 컴포넌트나 라이브러리를 만드는 회사에서 사용되고 있음
        // cssRules밑으로 속성 3개를 많이 사용 cssText,selectorText,style
        function f_style() {
            // 규칙 전체 내용
            // alert(document.styleSheets[2].cssRules[0].cssText);
            // 선택자
            // alert(document.styleSheets[2].cssRules[0].selectorText);
            // alert(document.styleSheets[1].cssRules[2].style.color);
            document.styleSheets[1].cssRules[5].style.backgroundColor = "tomato";
        }
    </script>
</body>

</html>

위의 방법은 불편!(매번 따져서 접근해야하기때문에)

쉽게 접근하기~!!~!!!~!~!~!~!~!!!!!~!~!

규칙에서 스타일로 접근?

 

보통

        function f_searchSelector(p_selector) {
            var v_styleSheets = document.styleSheets;
            for (var i = 0; i < v_styleSheets.length; i++) {
                var v_cssRules = v_styleSheets[i].cssRules;
                for (var j = 0; j < v_cssRules.length; i++) {
                    if (v_cssRules[j].selectorText == p_selector) {
                        return v_cssRules[j];
                    }
                }
            }
        }
        alert(f_searchSelector(".psy")); // 찾으려는 선택자값을 넘김

 

더보기 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* cssRules [0] */
        .psy {
            background-color: teal;
        }

        /* cssRules [1] */
        .psy {
            color: tomato;
        }
    </style>
    <link rel="stylesheet" href="css/myStyle.css">
    <style>
        .csj {
            font-size: 2em;
            background-color: pink;
        }

        div {
            display: inline-block;
            width: 100px;
            height: 100px;
        }
    </style>
</head>

<body>
    <div class="bgYello"></div><br>
    <input type=button value="내외부스타일시트 접근" onclick="f_style()">
    <script>
        function f_searchSelector(p_selector) {
            var v_styleSheets = document.styleSheets;
            for (var i = 0; i < v_styleSheets.length; i++) {
                var v_cssRules = v_styleSheets[i].cssRules;
                for (var j = 0; j < v_cssRules.length; i++) {
                    if (v_cssRules[j].selectorText == p_selector) {
                        return v_cssRules[j];
                    }
                }
            }
        }

        alert(f_searchSelector(".psy"));//찾으려는 선택자값을 넘김

        // 내외부 스타일시트 접근법은 일반전인 회사에서는 사용되지 않고
        // 전문 프론트엔트 컴포넌트나 라이브러리를 만드는 회사에서 사용되고 있음
        // cssRules밑으로 속성 3개를 많이 사용 cssText,selectorText,style
        function f_style() {
            // 규칙 전체 내용
            // alert(document.styleSheets[2].cssRules[0].cssText);
            // 선택자
            // alert(document.styleSheets[2].cssRules[0].selectorText);
            // alert(document.styleSheets[1].cssRules[2].style.color);
            document.styleSheets[1].cssRules[5].style.backgroundColor = "tomato";
        }
    </script>
</body>

</html>

 

 

        alert(f_searchSelector(".psy").cssText);
        alert(f_searchSelector(".bgBlue").cssText);

 

이제는

        f_searchSelector(".bgBlue").style.backgroundColor="magenta";
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* cssRules [0] */
        .psy {
            background-color: teal;
        }

        /* cssRules [1] */
        .psy {
            color: tomato;
        }
    </style>
    <link rel="stylesheet" href="css/myStyle.css">
    <style>
        .csj {
            font-size: 2em;
            background-color: pink;
        }

        div {
            display: inline-block;
            width: 100px;
            height: 100px;
        }
    </style>
</head>

<body>
    <div class="bgYello"></div><br>
    <input type=button value="내외부스타일시트 접근" onclick="f_style()">
    <script>
        function f_searchSelector(p_selector) {
            var v_stySheets = document.styleSheets;
            for (var i = 0; i < v_stySheets.length; i++) {
                var v_cssRules = v_stySheets[i].cssRules;
                for (j = 0; j < v_cssRules.length; j++) {
                    if (v_cssRules[j].selectorText == p_selector) {
                        return v_cssRules[j];
                    }
                }
            }
        }
        // alert(f_searchSelector(".bgBlue").cssText);   // 찾으려는 선택자값을 넘김



        // 내외부 스타일시트 접근법은 일반전인 회사에서는 사용되지 않고
        // 전문 프론트엔트 컴포넌트나 라이브러리를 만드는 회사에서 사용되고 있음
        // cssRules밑으로 속성 3개를 많이 사용 cssText,selectorText,style
        function f_style() {
            f_searchSelector(".bgYello").style.backgroundColor = "magenta";
            //  document.styleSheets[1].cssRules[5].style.backgroundColor="orange";
            // 규칙 전체 내용
            // alert(document.styleSheets[2].cssRules[0].cssText);
            // 선택자
            // alert(document.styleSheets[2].cssRules[0].selectorText);

            // alert(document.styleSheets[2].cssRules[0].style.fontSize);
        }
    </script>
</body>

</html>

 

폰트사이즈 두 배늘리기

            f_searchSelector(".ftSize").style.fontSize="2em";
더보기 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* cssRules [0] */
        .psy {
            background-color: teal;
        }

        /* cssRules [1] */
        .psy {
            color: tomato;
        }
    </style>
    <link rel="stylesheet" href="css/myStyle.css">
    <style>
        .csj {
            font-size: 2em;
            background-color: pink;
        }

        div {
            display: inline-block;
            width: 100px;
            height: 100px;
        }
        .ftSize {
            font-size:1em;
        }
    </style>
</head>
<body>
    <div class="bgYello ftSize">정말 이해?</div><br>
    <input type=button value="내외부스타일시트 접근" onclick="f_style()">
    <script>
        function f_searchSelector(p_selector) {
            var v_stySheets = document.styleSheets;
            for (var i = 0; i < v_stySheets.length; i++) {
                var v_cssRules = v_stySheets[i].cssRules;
                for (j = 0; j < v_cssRules.length; j++) {
                    if (v_cssRules[j].selectorText == p_selector) {
                        return v_cssRules[j];
                    }
                }
            }
        }
        // alert(f_searchSelector(".bgBlue").cssText);   // 찾으려는 선택자값을 넘김



        // 내외부 스타일시트 접근법은 일반전인 회사에서는 사용되지 않고
        // 전문 프론트엔트 컴포넌트나 라이브러리를 만드는 회사에서 사용되고 있음
        // cssRules밑으로 속성 3개를 많이 사용 cssText,selectorText,style
        function f_style() {
            f_searchSelector(".bgYello").style.backgroundColor = "magenta";
            f_searchSelector(".ftSize").style.fontSize="2em";
            //  document.styleSheets[1].cssRules[5].style.backgroundColor="orange";
            // 규칙 전체 내용
            // alert(document.styleSheets[2].cssRules[0].cssText);
            // 선택자
            // alert(document.styleSheets[2].cssRules[0].selectorText);

            // alert(document.styleSheets[2].cssRules[0].style.fontSize);
        }
    </script>
</body>

</html>

 

'카테고리 없음'의 다른글

  • 현재글스타일시트접근법
댓글

티스토리툴바