CSS DOM 동적 스타일링

CSS DOM 동적 스타일

JS를 사용하여 CSS의 각 속성을 조작하세요.
JS는 인라인 스타일만 작동하거나 수정할 수 있습니다. 예: imgObj.style.border = “1px solid red”
클래스 스타일의 경우 className을 통해 값을 할당합니다. 예: imgObj.className = "imgClass"

style object

각 HTML 태그에는 스타일 속성이 있습니다. 하지만 이 스타일 속성은 스타일 개체이기도 합니다.
그럼 이 스타일 개체의 속성은 무엇인가요? 스타일 객체의 속성은 CSS의 속성과 일대일로 대응됩니다.
따라서 CSS 대신 스타일 개체가 사용됩니다.
예: imgObj.style.border = "1px solid red";

스타일 개체 속성과 CSS 속성의 변환

단어 , CSS 속성과 같은 객체 속성의 스타일을 지정합니다.
단어가 여러 개인 경우 첫 번째 단어는 모두 소문자여야 하며, 다음 단어의 첫 글자는 대문자로 표시하고 밑줄은 삭제해야 합니다. ㅋㅋㅋ ;

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>php.cn</title>
        <script type="text/javascript">
            //网页加载完成
            window.onload = init;
            function init()
            {
                //获取id=img01的图片对象
                var imgObj = document.getElementById("img1");
                //给<img>标记添加行内样式
                imgObj.style.width = "400px";
                imgObj.style.border = "2px solid red";
                imgObj.style.padding = "20px 30px";
                imgObj.style.backgroundColor = "#f0f0f0";
            }
        </script>
    </head>
    <body >
        <img id="img1" src="/upload/course/000/000/009/580af7f52278b486.jpg" />
    </body>
</html>

지속적인 학습

새로운 파일

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>php.cn</title> <script type="text/javascript"> //网页加载完成 window.onload = init; function init() { //获取id=img01的图片对象 var imgObj = document.getElementById("img1"); //给<img>标记添加行内样式 imgObj.style.width = "400px"; imgObj.style.border = "2px solid red"; imgObj.style.padding = "20px 30px"; imgObj.style.backgroundColor = "#f0f0f0"; } </script> </head> <body > <img id="img1" src="/upload/course/000/000/009/580af7f52278b486.jpg" /> </body> </html>

제출하다 코드 재설정

자동운전