So ändern Sie Elemente in Javascript-js-Tutorial-php.cn

So ändern Sie Elemente in Javascript

青灯夜游

Freigeben： 2021-06-18 17:18:51

Original

4989 Leute haben es durchsucht

Methode: 1. Verwenden Sie die Anweisung „element.innerText=‘value‘“ oder „element.innerHTML=‘value‘“, um den Elementinhalt zu ändern. 2. Verwenden Sie die Anweisung „element.style“ oder „element.className“. um das Stilattribut des Elements zu ändern.

So ändern Sie Elemente in Javascript

Die Betriebsumgebung dieses Tutorials: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.

Elemente bedienen und ändern

JavaScript-DOM-Operationen können den Inhalt, die Struktur und den Stil von Webseiten ändern. Wir können DOM-Operationselemente verwenden, um den Inhalt, die Attribute usw. innerhalb der Elemente zu ändern.

Ändern Sie den Inhalt des Elements

element.innerText von der Startposition zur Endposition, aber es entfernt das HTML-Tag und die Leerzeichen und Zeilenumbrüche werden ebenfalls entfernt element.innerText从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉

element.innerHTML

element.innerHTMLAlle Inhalte von der Startposition bis zur Endposition, einschließlich HTML-Tags, unter Beibehaltung von Leerzeichen und Zeilenumbrüchen.

innerText erkennt keine HTML-Tags, innerHTML erkennt HTML-Tags. Diese beiden Eigenschaften sind lesbar und beschreibbar.

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

Nach dem Login kopieren

Nach dem Ausführen wird eine bestimmte Zeit angezeigt. Wenn Sie auf klicken, um die aktuelle Systemzeit anzuzeigen, werden das aktuelle Datum und die aktuelle Woche angezeigt.

So ändern Sie Elemente in Javascript

Ändern Sie die Stilattribute

element.style ändert die Inline-Operation, element.className ändert das Stilattribut des Klassennamens

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

Nach dem Login kopieren

Nachdem das Programm ausgeführt wurde, wird ein rosafarbenes Feld mit einer Breite und Höhe von angezeigt 200 Pixel werden angezeigt. Klicken Sie auf das Kästchen, um es zu einem violetten Kästchen mit einer Breite von 300 Pixeln und einer Höhe von 200 Pixeln zu machen. JS ändert die Stilstiloperation und erstellt Inline-Stile.

Verwenden Sie den Klassennamen, um Stilattribute zu ändern

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

Nach dem Login kopieren

[Verwandte Empfehlungen: Javascript-Lerntutorial]

🎜

Das obige ist der detaillierte Inhalt vonSo ändern Sie Elemente in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!