ホームページ  >  記事  >  ウェブフロントエンド  >  Web ページ要素のスタイルを動的に変更するための JS 開発

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

little bottle
little bottle転載
2019-04-27 15:51:232984ブラウズ

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

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

Web ページの構造:

ボタン:

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

p:

タグ: 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 の値は文字列

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

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

以上がWeb ページ要素のスタイルを動的に変更するための JS 開発の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事はcnblogs.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。