Rumah >hujung hadapan web >tutorial js >Tukar nilai href bagi teg selepas mengklik butang melalui JavaScript

Tukar nilai href bagi teg selepas mengklik butang melalui JavaScript

藏色散人asal: 2021-08-31 10:23:222547semak imbas

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

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>

Kesannya adalah seperti berikut:

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

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>

Kesannya adalah seperti berikut:

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

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!

JavaScript jquery html NULL dom href

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Artikel yang menerangkan cara melaksanakan muat naik dan muat turun tanpa muat semula dengan ajax (penjelasan kod terperinci)Artikel seterusnya：Artikel yang menerangkan cara melaksanakan muat naik dan muat turun tanpa muat semula dengan ajax (penjelasan kod terperinci)

Artikel berkaitan

Lihat lagi