développement js pour modifier dynamiquement les styles d'éléments de page Web-js tutoriel-php.cn

développement js pour modifier dynamiquement les styles d'éléments de page Web

little bottle

Libérer： 2019-04-27 15:51:39

avant

2991 Les gens l'ont consulté

Cet article parle principalement d'exemples de code pour modifier les styles d'éléments de page Web avec JS. Il a une certaine valeur de référence. Les amis intéressés pourront en apprendre davantage après l'avoir lu.

Dans le développement front-end, les styles des éléments de page Web doivent parfois être modifiés dynamiquement. Voici un résumé de la méthode de modification dynamique des styles d'éléments à l'aide de JS.

Structure de la page Web :

Bouton :

Balise : entrée Type : identifiant du bouton : valeur btn : cliquez sur moi

p :

Balise : p id : box

Il existe deux façons d'utiliser JS pour modifier le style des éléments de la page Web :

1 Utiliser ClassName

Le code est le suivant :

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

Copier après la connexion

Tutoriels associés : Tutoriel vidéo HTML

Remarque :

1. , utilisez l'exemple de style ClassName ou Style Object? ?

Lors de la définition de plusieurs attributs de style, il est pratique d'utiliser des styles de classe

Lorsque vous définissez moins d'attributs de style, il est plus pratique d'utiliser des objets Style

2. Lors de l'utilisation de Style objets Lorsque vous rencontrez les attributs de largeur et de hauteur, vous devez ajouter l'unité px

3. La valeur du style de l'attribut d'objet Style est une chaîne

Le résultat est tel qu'indiqué dans la figure :