Modifiez la valeur href de la balise <a> après avoir cliqué sur le bouton via JavaScript-js tutoriel-php.cn

Modifiez la valeur href de la balise après avoir cliqué sur le bouton via JavaScript

藏色散人

Libérer： 2021-08-31 10:24:51

original

2508 Les gens l'ont consulté

Dans l'article précédent "Comment utiliser jQuery pour animer des éléments de paragraphe", je vous ai présenté comment utiliser jQuery pour animer des éléments de paragraphe. Les amis intéressés peuvent le lire et en apprendre davantage~

Cet article vous présentera comment le faire. animer les éléments de paragraphe. JavaScript modifie la valeur href de la balise

Nous rencontrerons inévitablement de telles exigences dans notre processus de développement quotidien, alors ne manquez pas cet article~

Deux méthodes d'implémentation sont présentées ci-dessous :

La première méthode

Le code est le suivant :

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

Copier après la connexion

L'effet est le suivant :

La deuxième méthode

Le code est le suivant :

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

Copier après la connexion

L'effet est le suivant :

Introduction connexe :

Sélectionnez les éléments de cinq manières :

Méthode document.querySelector() : elle renvoie le premier élément correspondant à la requête.
Méthode document.querySelectorAll() : elle renvoie tous les éléments correspondant à la requête.
Méthode document.getElementById() : Elle renvoie un élément correspondant à l'identifiant.
Méthode document.getElementsByClassName() : renvoie tous les éléments correspondant à la classe.
Méthode document.getElementsByTagName() : Elle renvoie une liste d'éléments correspondant au nom de la balise.

DOM permet la manipulation des attributs. Les attributs contrôlent le comportement d'une balise HTML ou fournissent des informations supplémentaires sur la balise. JavaScript fournit diverses méthodes pour manipuler les attributs des éléments HTML.

Les méthodes suivantes sont utilisées pour faire fonctionner les attributs :

Méthode getAttribute() : Elle renvoie la valeur actuelle d'un attribut sur l'élément, ou null si l'attribut spécifié n'existe pas sur l'élément.
Méthode setAttribute() : Elle met à jour la valeur d'un attribut existant sur l'élément spécifié, sinon ajoute un nouvel attribut avec le nom et la valeur spécifiés.
MéthoderemoveAttribute() : utilisée pour supprimer l'attribut de l'élément spécifié.

Enfin, je voudrais recommander "Tutoriel de base JavaScript" à tout le monde ~ Bienvenue à tous pour apprendre ~

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!