Heim > Artikel > Web-Frontend > So ändern Sie Elemente in Javascript
So ändern Sie Elemente in Javascript
- 青灯夜游Original
- 2021-06-18 17:18:514865Durchsuche
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.
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('button');
var div = document.querySelector('div');
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 = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
var day = date.getDay();
return '今天是'+year+'年'+month+'月'+dates+'日'+arr[day];
}
</script>
</body>
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. 
Ä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('div');
div.onclick = function(){
this.style.backgroundColor = 'purple';
this.style.width='300px';
}
</script>
</body>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('div');
test.onclick = function(){
//将当前元素的类名改为change
this.className = 'change';
}
</script>
</body>[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!