JavaScript-Operationselemente zeigen Ihnen, wie Sie den Seiteninhaltsstil ändern

Inhaltsverzeichnis

1. Bedienelemente

1.1. Elementinhalt ändern
1.2. Der Unterschied zwischen innerText und innerHtml
1.3. Bedienen Sie Elemente, um Elementattribute zu ändern
1.4、Beispiel für die Zeitanzeige
1.5. Formularattributoperation
1.6. Nachahmung der versteckten und angezeigten Passwortoperation von Jingdong
1.7. Style-Attribut-Operation
1.8. QR-Codes anzeigen und ausblenden

Zusammenfassen

1. Bedienelemente

Bildbeschreibung hier einfügen

1.1. Elementinhalt ändern

Bildbeschreibung hier einfügen

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

Bildbeschreibung hier einfügen

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

Bildbeschreibung hier einfügen

1.7. Stilattributoperation

Bildbeschreibung hier einfügen

<!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: display:none

Bildbeschreibung hier einfügen

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

Zusammenfassen

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

Detaillierte Erklärung zur Verwendung neuer Methoden von HTML5 zur Manipulation von Elementklassennamen in JavaScript
Beispiele für JavaScript-Operationselemente
Detaillierte Erläuterung von JavaScript-WebAPI-, DOM-, Ereignis- und Operationselementbeispielen
js betreibt zwei JSON-Arrays, um sie zusammenzuführen, Duplikate zu entfernen und ein bestimmtes Element zu löschen
Das Klickereignis von vue.js ruft die Operation des aktuellen Elementobjekts ab
Beispielanalyse für das Hinzufügen, Bearbeiten und Löschen von JavaScript-HTML-DOM-Elementen (Knoten)
Vollständiges Beispiel für die Operation eines JS-Dokumentformularelements
Zusammenfassung gängiger Methoden von JavaScript-Operationselementen

<<: Interviewfrage: Dreizeiliges und dreispaltiges Layout, Tabellen werden zusammengeführt und verschachtelte Tabellen sind nicht zulässig

>>: Über das Problem der Offline-Installation des Docker-Pakets unter CentOS 8.4