JavaScript-Operationselemente zeigen Ihnen, wie Sie den Seiteninhaltsstil ändern
1. Bedienelemente
1.1. Elementinhalt ändern
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Dokument</title>
</Kopf>
<Text>
<button>Aktuelle Systemzeit anzeigen</button>
<div>Irgendwann</div>
<p>123</p>
<Skript>
// 1. Wenn wir auf Annes Div klicken, ändert sich der Text // (1) Hol das Element var btn = document.querySelector('button');
var div = document.querySelector('div');
// (2), Ereignis registrieren btn.onclick = function(){
div.innerText = getDate();
}
Funktion getDate(){
// Beispiel: Aktuelle Systemzeit abrufen Mittwoch, 24. November 2021 var date = new Date();
var Jahr = Datum.getFullYear();
var Monat = Datum.getMonth()+1;
var dates = date.getDate();
var arr = ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'];
var Tag = Datum.getDay();
return 'Heute ist:' + Jahr + 'Jahr' + Monat + 'Monat' + Datum + 'Tag' + arr[Tag];
}
// 2. Sie können Ereignisse anzeigen, ohne sie zu registrieren var p = document.querySelector('p');
p.innerHTML = getDate();
</Skript>
</body>
</html>
1.2. Der Unterschied zwischen innerText und innerHtml
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Dokument</title>
</Kopf>
<Text>
<div></div>
<p>
Ich bin Text <span>123</span>
</p>
<Skript>
// Der Unterschied zwischen innerText und innerHtml // 1. innerText erkennt keine HTML-Tags, während innerHtml HTML-Tags erkennt var div = document.querySelector('div');
div.innerText = '<strong>Heute ist:</strong> 2021';
// innerHtml identifiziert den HTML-Tag W3C-Standard // div.innerHTML = '<strong>Heute ist: </strong>2021';
// 2. Diese beiden Attribute sind lesbar und beschreibbar und können den Inhalt innerhalb des Elements abrufen var p = div.innerHTML = document.querySelector('p');
// innerText entfernt Leerzeichen und Zeilenumbrüche console.log(p.innerText);
Konsole.log(p.innerHTML);
</Skript>
</body>
</html>
1.3. Bedienen Sie Elemente, um Elementattribute zu ändern
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Dokument</title>
</Kopf>
<Text>
<button id="ldh">Andy Lau</button>
<button id='zxy'>Jacky Cheung</button>
<img src='images/ldh.jpg' alt="" title="Andy Lau">
<Skript>
//Ändern Sie das Elementattribut src
// 1. Element abrufen var ldh = document.getElementById('ldh');
var zxy = document.getElementById('zxy');
var img = document.querySelector('img');
// 2. Eventhandler registrieren zxy.onclick = function(){
img.src = "bilder/zxy.jpg";
img.title = "Jacky Cheung";
}
ldh.onclick = Funktion(){
img.src = "bilder/ldh.jpg";
img.title="Andy Lau";
}
</Skript>
</body>
</html>
1.4、Beispiel für die Zeitanzeige
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Dokument</title>
<Stil>
img{
Breite: 300px;
}
</Stil>
</Kopf>
<Text>
<img src = "images/s.gif" alt="">
<div id="div">Guten Morgen, Liebling, schreib guten Code</div>
<Skript>
var img = document.querySelector('img');
var div = document.getElementById('div');
// Aktuelle Systemzeit abrufen var time = new Date();
var h = Zeit.getHours();
wenn(h < 12){
img.src = "Bilder/s.gif";
div.innerHTML = "Guten Morgen, geh und schreib etwas Code";
}sonst wenn(h < 18){
img.src = "Bilder/x.gif";
div.innerHTML = "Guten Tag, gehen Sie und schreiben Sie etwas Code";
}anders{
img.src = "Bilder/w.gif";
div.innerHTML = "Guten Abend, geh und schreib etwas Code";
}
</Skript>
</body>
</html>
1.5. Formularattributoperation
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Dokument</title>
</Kopf>
<Text>
<button>Schaltfläche</button>
<input type="text" value="Eingabeinhalt"/>
<Skript>
// 1. Holen Sie das Element var btn = document.querySelector('button');
var Eingabe = document.querySelector('Eingabe');
// 2. Eventhandler registrieren btn.onclick = function(){
// input.innerHTML = 'geklickt'; Dies ist ein häufiges Joint Venture, beispielsweise der Inhalt in einem Div-Tag. // Der Werttextinhalt im Formular wird durch den Wert geändert. input.value = 'geklickt';
// Wenn Sie möchten, dass ein Formular deaktiviert wird und Sie nicht mehr auf „Deaktiviert“ klicken können, möchten wir, dass diese Schaltfläche deaktiviert wird. // btn.disabled = true;
dies.deaktiviert = wahr;
// dies bezieht sich auf den Aufrufer der Ereignisfunktion}
</Skript>
</body>
</html>
1.6. Nachahmung der versteckten und angezeigten Passwortoperation von Jingdong
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Dokument</title>
<Stil>
.Kasten {
Position: relativ;
Breite: 400px;
Rahmen unten: 1px durchgezogen #ccc;
Rand: 100px automatisch;
}
.box Eingabe {
Breite: 370px;
Höhe: 30px;
Rand: 0;
Gliederung: keine;
}
.box img {
Position: absolut;
oben: 5px;
rechts: 7px;
Breite: 24px;
}
</Stil>
</Kopf>
<Text>
<div Klasse="Box">
<label für="">
<img src="images/close.png" id="Auge">
</Bezeichnung>
<input type="password" name="" id="pwd"></input>
</div>
<Skript>
// 1. Element abrufen var eye = document.getElementById('eye');
var pwd = document.getElementById('pwd');
// 2. Ereignishandler registrieren var flag = 0;
Auge.beimKlicken = Funktion(){
// Nach einmaligem Klicken muss das Flag betätigt werden if (flag == 0) {
pwd.Typ = "Text";
eye.src="Bilder/öffnen.png";
flag = 1; //Zuweisungsoperation}else{
pwd.type='Passwort';
eye.src="Bilder/schließen.png";
Flagge = 0;
}
}
</Skript>
</body>
</html>
1.7. Stilattributoperation
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Dokument</title>
<Stil>
div {
Breite: 200px;
Höhe: 200px;
Hintergrundfarbe: rosa;
}
</Stil>
</Kopf>
<Text>
<div></div>
<Skript>
// 1. Holen Sie das Element var div = document.querySelector('div');
// 2. Eventhandler registrieren div.onclick = function() {
diese.Stil.Hintergrundfarbe = "lila";
diese.Stil.Breite = "250px";
}
</Skript>
</body>
</html>
1.8. QR-Codes anzeigen und ausblenden Wichtiger Punkt:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Dokument</title>
</Kopf>
<Text>
<div Klasse = "close-btn" Stil="Anzeige: Block;">
<img src = "bilder/ewm.png" id = "img">
</div>
<Skript>
// 1. Holen Sie das Element var btn = document.querySelector('.close-btn');
var img = document.querySelector('img');
// 2. Ereignisverarbeitung registrieren btn.onclick = function(){
btn.style.display = "keine";
}
</Skript>
</body>
</html>
ZusammenfassenDieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalt auf 123WORDPRESS.COM lesen können! Das könnte Sie auch interessieren:
|
>>: Über das Problem der Offline-Installation des Docker-Pakets unter CentOS 8.4
Artikel empfehlen
nuxt.js Konfiguration mehrerer Umgebungsvariablen
Inhaltsverzeichnis 1. Einleitung 2. Szenario 3. S...
Detaillierte Erläuterung der Lösung zur festen Positionierung von CSS-Unterelementen relativ zum übergeordneten Element
Grundlegende Konzepte Absolute Positionierung: Ei...
Erfahrungsaustausch durch einen Frontend-Supervisor mit 7 Jahren Praxiserfahrung
Heute teile ich die wertvollen Erfahrungen eines ...
Detaillierte Erklärung der JavaScript-Fehlererfassung
Inhaltsverzeichnis 1. Grundlegende Verwendung und...
Lösen Sie das Problem inkonsistenter Front- und Back-End-Ports von Vue
Die Front- und Back-End-Ports von Vue sind inkons...
Website User Experience Design (UE)
Ich habe gerade einen von JunChen verfassten Beitr...
Design-Sharing der Download-Seite des Pengyou.com-Mobilclients (Bild und Text)
Schauen wir uns zunächst einige einfache Daten an:...
So erstellen Sie ein einfaches Säulendiagramm mit Flex-Layout in CSS
Das Folgende ist ein Balkendiagramm im Flex-Layou...
Verwendung des MySQL-Stresstesttools Mysqlslap
1. MySQLs eigenes Stresstest-Tool Mysqlslap mysql...
Hinweise zum Systemaufruf des Linux-Kernel-Gerätetreibers
/**************************** * Systemaufruf*****...
Detaillierte Schritte zur Installation und Konfiguration von MySQL 8.0 auf CentOS 7.4 64-Bit
Schritt 1: Holen Sie sich die MySQL YUM-Quelle Ge...
Übung zum dynamischen Erstellen von Dialogen entsprechend dem Dateinamen in vue+el-element
Inhaltsverzeichnis Hintergrund erreichen 1. Gekap...
Sieben verschiedene Farbschemata für das Website-Design-Erlebnis
Die Farbabstimmung beim Erstellen einer Website i...
Docker-Konfiguration Alibaba Cloud Image Acceleration Pull-Implementierung
Heute habe ich Docker verwendet, um das Image abz...
So installieren Sie OpenJDK in Docker und führen das JAR-Paket aus
Bild herunterladen Docker-Pull OpenJDK Erstellen ...