You cannot see this page without javascript.

2016.09.23 15:26

JavaScript CSS 변경

조회 수 318 추천 수 0 댓글 0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

       <head>

             <title></title>

             <meta name="generator" content="editplus" />

             <meta name="author" content="김종현" />

             <script type="text/javascript">

                    function Test() {

                           var div = document.getElementById("div1");

                          //자바스크립트로 CSS 제어, 패턴이 단하나(모든스타일리스트 제어 가능)

                           //1. 모든 태그는 style 속성이 있음

                           //div.style

 

                           //2. style속성 뒤에 모든 CSS의 표현을 추가

                           // a. '-'는 삭제

                           // b. 각 단어의 첫문자는 대문자

                           // c. 모든 속성값은 "값" 형식으로

                           div.style.backgroundColor = "red";

                           div.style.fontColor = "blue";

                           div.style.fontWeight = "bold";

                           div.style.textDecoration = "underline";

                           div.style.fontSize = "12px";

 

                           div.style.position = "absolute";

                           div.style.left = "300px";

                           div.style.top = "200px";

                           //z-index zIndex

                           //margin-left  marginLeft

                    }

             </script>

       </head>

 

       <body>

             <!--Ex11.htm-->

             <div id="div1">영역</div>

             <hr />

             <input id="div1" type="button" value="테스트" onclick="Test();" />

       </body>

</html>