Web ページ要素のスタイルを動的に変更するための JS 開発-jsチュートリアル-php.cn

Web ページ要素のスタイルを動的に変更するための JS 開発

little bottle

リリース： 2019-04-27 15:51:39

転載

3003 人が閲覧しました

この記事では主に、JS を使用して Web ページ要素のスタイルを変更するためのコード例について説明します。一定の参考価値があります。興味のある友人はそれについて学ぶことができます。読んだ後に役立つことを願っています。

フロントエンド開発ではWebページ要素のスタイルを動的に変更する必要がある場合がありますが、JSを使用して要素のスタイルを動的に変更する方法をまとめます。

Web ページの構造:

ボタン:

ラベル:input タイプ:ボタン ID:btn 値:click me

タグ: p id: box

JS を使用して Web ページ要素のスタイルを変更するには、次の 2 つの方法があります:

1. ClassName を使用します

2. Style オブジェクトを使用します

コードは次のとおりです:

 <!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>

ログイン後にコピー

関連チュートリアル: HTML ビデオチュートリアル

注:

1. スタイルを操作するときは、サンプルスタイル ClassName または Style Object を使用しますか? ?

複数のスタイル属性を設定する場合は、クラススタイルを使用すると便利です

設定するスタイル属性の数が少ない場合は、Style オブジェクトを使用すると便利です

2. スタイルを使用する場合オブジェクトの幅と高さの属性が見つかった場合は、px 単位を追加する必要があります

3. スタイルオブジェクト属性 style の値は文字列

結果は図に示すようになります: