ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript経由でボタンをクリックした後にタグのhref値を変更する
JavaScript経由でボタンをクリックした後にタグのhref値を変更する
- 藏色散人オリジナル
- 2021-08-31 10:23:222546ブラウズ
前の記事「jQuery を使用して段落要素をアニメーション化する方法」では、jQuery を使用して段落要素をアニメーション化する方法を紹介しました。興味のある方は読んで詳細をご覧ください~
Thisこの記事では、JavaScript を使用してボタンをクリックした後に 3499910bf9dac5ae3c52d5ede7383485 タグの href 値を変更する方法を紹介します。
日常の開発プロセスでは、このような要件に必ず遭遇します。そのため、この記事をお見逃しなく~
次の 2 つの実装方法:
最初の方法
コードは次のとおりです:
<!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>効果は次のとおりです:
2 番目の方法
コードは次のとおりです:
<!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('myLink').href
="https://www.php.cn";
document.getElementById("myLink")
.textContent = "欢迎来到PHP中文网！";
}
</script>
</body>
</html>効果は次のとおりです:
- document.querySelector() メソッド: クエリに一致する最初の要素を返します。
- document.querySelectorAll() メソッド: クエリに一致するすべての要素を返します。
- document.getElementById() メソッド: ID に一致する要素を返します。
- document.getElementsByClassName() メソッド: クラスに一致するすべての要素を返します。
- document.getElementsByTagName() メソッド: タグ名に一致する要素のリストを返します。
- getAttribute() メソッド: 要素の属性の現在の値を返します。要素上に存在する場合は、null を返します。
- setAttribute() メソッド: 指定された要素の既存の属性の値を更新します。それ以外の場合は、指定された名前と値を持つ新しい属性を追加します。
- removeAttribute() メソッド: 指定された要素の属性を削除するために使用されます。
JavaScript Basics Tutorial」をお勧めします ～皆さんもぜひ学んでください～
以上がJavaScript経由でボタンをクリックした後にタグのhref値を変更するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。