recherche

Maison >interface Web >js tutoriel >Modifiez la valeur href de la balise après avoir cliqué sur le bouton via JavaScript

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

藏色散人
藏色散人original
2021-08-31 10:23:222547parcourir

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 3499910bf9dac5ae3c52d5ede7383485

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>

L'effet est le suivant :

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

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>

L'effet est le suivant :

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

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!

JavaScript jquery html NULL dom href
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Un article expliquant comment implémenter le téléchargement et le téléchargement sans actualisation avec ajax (explication détaillée du code)Article suivant：Un article expliquant comment implémenter le téléchargement et le téléchargement sans actualisation avec ajax (explication détaillée du code)

Articles Liés

Voir plus