Tukar nilai href bagi teg <a> selepas mengklik butang melalui JavaScript-tutorial js-php.cn

Tukar nilai href bagi teg selepas mengklik butang melalui JavaScript

藏色散人

Lepaskan： 2021-08-31 10:24:51

asal

2499 orang telah melayarinya

Dalam artikel sebelum ini "Cara menggunakan jQuery untuk menghidupkan elemen perenggan", saya memperkenalkan anda cara menggunakan jQuery untuk menghidupkan elemen perenggan. Rakan yang berminat boleh membaca dan mempelajari lebih lanjut~

Artikel ini akan memperkenalkan kepada anda cara menukar nilai href bagi teg

Kami pasti akan menghadapi keperluan sedemikian dalam proses pembangunan harian kami, jadi jangan terlepas artikel ini~

Dua kaedah pelaksanaan berikut diperkenalkan:

Kaedah pertama

Kodnya adalah seperti berikut:

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

Salin selepas log masuk

Kesannya adalah seperti berikut:

Kedua Kod kaedah ini

adalah seperti berikut:

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

Salin selepas log masuk

Kesannya adalah seperti berikut:

Pengenalan berkaitan:

Pilih elemen dalam lima cara:

document.querySelector() kaedah: Ia mengembalikan elemen pertama yang sepadan dengan pertanyaan.
document.querySelectorAll() kaedah: Ia mengembalikan semua elemen yang sepadan dengan pertanyaan.
document.getElementById() kaedah: Ia mengembalikan id padanan elemen.
document.getElementsByClassName() kaedah: Mengembalikan semua elemen yang sepadan dengan kelas.
document.getElementsByTagName() kaedah: Ia mengembalikan senarai elemen yang sepadan dengan nama tag.

DOM membenarkan manipulasi atribut. Atribut mengawal kelakuan teg HTML atau memberikan maklumat tambahan tentang teg tersebut. JavaScript menyediakan pelbagai kaedah untuk memanipulasi atribut elemen HTML.

Kaedah berikut digunakan untuk mengendalikan atribut:

kaedah getAttribute(): Ia mengembalikan nilai semasa atribut pada elemen jika atribut yang ditentukan tidak wujud pada elemen, Mengembalikan null.
kaedah setAttribute(): Ia mengemas kini nilai atribut sedia ada pada elemen yang ditentukan, jika tidak menambah atribut baharu dengan nama dan nilai yang ditentukan.
kaedah removeAttribute() : digunakan untuk mengalih keluar atribut elemen yang ditentukan.

Akhir sekali, saya ingin mengesyorkan "Tutorial Asas JavaScript"~ Selamat datang semua untuk belajar~

Atas ialah kandungan terperinci Tukar nilai href bagi teg selepas mengklik butang melalui JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!