Comment modifier des éléments en javascript-js tutoriel-php.cn

Comment modifier des éléments en javascript

青灯夜游

Libérer： 2021-06-18 17:18:51

original

4901 Les gens l'ont consulté

Méthode : 1. Utilisez l'instruction "element.innerText='value'" ou "element.innerHTML='value'" pour modifier le contenu de l'élément ; 2. Utilisez l'instruction "element.style" ou "element ; Instruction .className" Modifier les propriétés de style d'élément.

Comment modifier des éléments en javascript

L'environnement d'exploitation de ce tutoriel : système Windows 7, JavaScript version 1.8.5, ordinateur Dell G3.

Exploiter et modifier des éléments

L'opération DOM de JavaScript peut modifier le contenu, la structure et le style de la page Web. Nous pouvons utiliser les éléments d'opération DOM pour modifier le contenu, les attributs, etc. à l'intérieur de l'élément.

modifie le contenu de l'élément

element.innerText de la position de départ à la position de fin, mais il supprime le code HTML balise, Dans le même temps, les espaces et les sauts de ligne seront également supprimés de l'ensemble du contenu de la position de départ à la position de fin de

element.innerHTML, y compris les balises html, tout en conservant les espaces et les sauts de ligne.

innerText ne reconnaît pas les balises HTML, innerHTML reconnaît les balises HTML. Ces deux propriétés sont lisibles et inscriptibles.

<body>
    <button>
        显示系统当前时间
    </button>
    <div>
        某个时间
    </div>
    <script>
    	var btn = document.querySelector(&#39;button&#39;);
        var div = document.querySelector(&#39;div&#39;);
        btn.onclick = function(){
            div.innerText = getDate();
        }
        
        function getDate(){
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth()+1;
            var dates = date.getDate();
            var arr = [&#39;星期日&#39;,&#39;星期一&#39;,&#39;星期二&#39;,&#39;星期三&#39;,&#39;星期四&#39;,&#39;星期五&#39;,&#39;星期六&#39;];
            var day = date.getDay();
            return &#39;今天是&#39;+year+&#39;年&#39;+month+&#39;月&#39;+dates+&#39;日&#39;+arr[day];
        }
    </script>
</body>

Copier après la connexion

Comment modifier des éléments en javascript

Après l'exécution, une certaine heure sera affichée. Lorsque vous cliquez pour afficher l'heure actuelle du système, la date et la semaine actuelles seront affichées.

Comment modifier des éléments en javascript

Modifier les attributs de style

element.style modifie l'opération en ligne, element.className modifie la classe name Attribut de style

<head>
	<style>
        div {
            width:200px;
            height:200px;
            background-color:pink;
        }
	</style>
</head>
<body>
    <div>
        
    </div>
    <script>
    	var div = document.quertSelector(&#39;div&#39;);
        div.onclick = function(){
         this.style.backgroundColor = &#39;purple&#39;;
         this.style.width=&#39;300px&#39;;
        }

    </script>
</body>

Copier après la connexion

Une fois le programme exécuté, une boîte rose d'une largeur et d'une hauteur de 200 pixels apparaîtra. Cliquez sur la boîte pour la transformer en une boîte violette d'une largeur de 300 pixels et d'une hauteur de 300 pixels. 200 pixels. JS modifie l'opération de style et produit des styles en ligne.

Utilisez className pour modifier les attributs de style

<head>
    <style>
        div {
            width:100px;
            height:100px;
            background-color:pink;
        }
        .change {
            width:200px;
            height:200px;
            background-color:purple;
        }
    </style>
</head>
<body>
    <div>
       文本    
    </div>
    <script>
    	vet test =document.querySelector(&#39;div&#39;);
        test.onclick = function(){
            //将当前元素的类名改为change
          this.className = &#39;change&#39;;  
        }
    </script>
    
</body>

Copier après la connexion

[Recommandations associées : Tutoriel d'apprentissage Javascript]

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!