JavaScript - style 속성을 이용한 CSS 직접 적용

소스

<h2 onclick="changeCSS();">CSS 적용하기</h2>

<script>

    function changeCSS (){
        var h2Ele = document.querySelector("h2");
        h2Ele.style.border = "5px solid black";
        h2Ele.style.color = "skyblue";
        // - 있는 속성의 경우 [""]나, -제외후 대문자로 시작하여 사용 가능
        //h2Ele.style["background-color"] = "yellow";
        h2Ele.style.backgroundColor = "yellow";
        // 안쪽 여백
        h2Ele.style.padding = "30px";
        // 바깥쪽 여백
        h2Ele.style.margin = "30px";
        h2Ele.style.height = "100px";
        h2Ele.style.borderRadius = "100px";
        // 글자를 수평 센터로
        h2Ele.style.textAlign = "center";
        // 글자를 수직 센터로
        h2Ele.style.lineHeight = "100px";
    }

</script>

 

결과