Heim > Artikel > Web-Frontend > Ändern Sie den href-Wert des -Tags, nachdem Sie über JavaScript auf die Schaltfläche geklickt haben

Ändern Sie den href-Wert des -Tags, nachdem Sie über JavaScript auf die Schaltfläche geklickt haben

藏色散人Original: 2021-08-31 10:23:222506Durchsuche

Im vorherigen Artikel „So verwenden Sie jQuery zum Animieren von Absatzelementen“ habe ich Ihnen vorgestellt, wie Sie jQuery zum Animieren von Absatzelementen verwenden. ~

In diesem Artikel erfahren Sie, wie Sie animieren Absatzelemente. JavaScript ändert den href-Wert des 3499910bf9dac5ae3c52d5ede7383485

Wir werden in unserem täglichen Entwicklungsprozess unweigerlich auf solche Anforderungen stoßen, also verpassen Sie diesen Artikel nicht ~

Im Folgenden werden zwei Implementierungsmethoden vorgestellt:

Die erste Methode

Der Code lautet wie folgt:

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>

</head>

<body style="text-align:center;">

<h1 style="color:#ff311f">
    PHP中文网
</h1>

<h3>
    更改href属性值
</h3>

<a href="https://www.baidu.com/">
    Go to 百度！
</a>

<br><br>

<button onclick="myFunction()">
    点击更改跳转链接
</button>

<script type="text/javascript">
    function myFunction() {
        var link = document.querySelector("a");
        link.getAttribute("href");
        link.setAttribute("href",
            "https://www.php.cn/");
        link.textContent = "欢迎来到PHP中文网！";
    }
</script>
</body>

</html>

Der Effekt ist wie folgt:

GIF 2021-8-31 星期二上午 10-16-44.gif

Die zweite Methode

Der Code lautet wie folgt:

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>

</head>

<body style="text-align:center;">

<h1 style="color:#ff7a03">
    PHP中文网
</h1>

<h3>
    更改href属性值
</h3>

<a href="https://www.baidu.com" id="myLink">
    Go to 百度
</a>

<br><br>

<button onclick="myFunction()">
    点击更改跳转链接
</button>

<script type="text/javascript">
    function myFunction() {
        document.getElementById(&#39;myLink&#39;).href
            ="https://www.php.cn";

        document.getElementById("myLink")
            .textContent = "欢迎来到PHP中文网！";
    }
</script>
</body>

</html>

Der Effekt ist wie folgt:

GIF 2021-8-31 星期二上午 10-19-50.gif

Zugehörige Einführung:

Wählen Sie Elemente auf fünf Arten aus:

document.querySelector() Methode: Sie gibt das erste Element zurück, das mit der Abfrage übereinstimmt.
document.querySelectorAll()-Methode: Sie gibt alle Elemente zurück, die der Abfrage entsprechen.
document.getElementById()-Methode: Sie gibt ein Element zurück, das mit der ID übereinstimmt.
document.getElementsByClassName()-Methode: Gibt alle Elemente zurück, die der Klasse entsprechen.
document.getElementsByTagName()-Methode: Sie gibt eine Liste von Elementen zurück, die dem Tag-Namen entsprechen.

DOM ermöglicht die Manipulation von Attributen. Attribute steuern das Verhalten eines HTML-Tags oder stellen zusätzliche Informationen über das Tag bereit. JavaScript bietet eine Vielzahl von Methoden zum Bearbeiten der Attribute von HTML-Elementen.

Die folgenden Methoden werden zum Bearbeiten von Attributen verwendet:

getAttribute()-Methode: Sie gibt den aktuellen Wert eines Attributs auf dem Element zurück oder null, wenn das angegebene Attribut auf dem Element nicht vorhanden ist.
setAttribute()-Methode: Sie aktualisiert den Wert eines vorhandenen Attributs für das angegebene Element, andernfalls fügt sie ein neues Attribut mit dem angegebenen Namen und Wert hinzu.
removeAttribute()-Methode: Wird zum Entfernen des Attributs des angegebenen Elements verwendet.

Abschließend möchte ich „JavaScript Basic Tutorial“ jedem empfehlen ~ Willkommen zum Lernen ~

Das obige ist der detaillierte Inhalt vonÄndern Sie den href-Wert des -Tags, nachdem Sie über JavaScript auf die Schaltfläche geklickt haben. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript jquery html NULL dom href

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Ein Artikel, in dem erläutert wird, wie ein aktualisierungsfreier Upload und Download mit Ajax implementiert wird (detaillierte Code-Erklärung)Nächster Artikel：Ein Artikel, in dem erläutert wird, wie ein aktualisierungsfreier Upload und Download mit Ajax implementiert wird (detaillierte Code-Erklärung)

In Verbindung stehende Artikel

Mehr sehen