웹 페이지 요소 스타일을 동적으로 수정하는 Node.js 개발-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

웹 페이지 요소 스타일을 동적으로 수정하는 Node.js 개발

little bottle

Apr 27, 2019 pm 03:51 PM

html js

이 기사는 주로 JS를 사용하여 웹 페이지 요소 스타일을 수정하는 코드 예제에 대해 설명합니다. 관심 있는 친구가 이 기사를 읽고 도움이 되기를 바랍니다.

프론트엔드 개발에서 웹페이지 요소의 스타일을 동적으로 수정해야 하는 경우가 있습니다. JS를 사용하여 요소 스타일을 동적으로 수정하는 방법을 요약해 보겠습니다.

웹 페이지 구조:

버튼:

라벨: 입력 유형: 버튼 ID: btn 값: 클릭

1. ClassName 사용

2. 스타일 개체 사용

코드는 다음과 같습니다.

 <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>DOM操作元素的样式</title>
        <style type="text/css">
            .box{
                width: 100px;
                height: 100px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <input type="button" id="btn" value="点  我" />
        <div id="box"></div>
        
        <!-- 添加JS代码 -->
        <script type="text/javascript">
            //定义函数my$-根据元素id获得页面元素,目的是为了提高效率
            function my$(id){
                return document.getElementById(id);
            }
            
            // 方法1.根据ClassName修改元素的样式
//             var btn=my$(&#39;btn&#39;);
//             btn.onclick=function(){
//                 my$(&#39;box&#39;).className=&#39;box&#39;;
//             }
            
            //方法2.根据Style对象修改元素的样式
            var btn=my$(&#39;btn&#39;);
            btn.onclick=function(){
                var box=my$(&#39;box&#39;);
                box.style.width="100px";
                box.style.height="100px";
                box.style.backgroundColor="red";
            }
        </script>
    </body>
</html>

로그인 후 복사