ホームページ > 記事 > ウェブフロントエンド > jqueryで属性を追加および削除する方法
jqueryで属性を追加および削除する方法
- 青灯夜游オリジナル
- 2022-05-13 17:54:082541ブラウズ
jquery では、attr() または prop() を使用して要素に属性を追加できます。構文は、「object.attr("属性名", "値")」または「object.prop(」です。属性名", "値")"; 属性を削除するには、removeAttr() を使用できます。構文は "object.removeAttr("属性名")" です。
このチュートリアルの動作環境: Windows7 システム、jquery3.2.1 バージョン、Dell G3 コンピューター。
属性を追加および削除するための jquery メソッド
1. 属性を追加するには attr() または prop() を使用します
prop() と attr() の両方を使用して、要素の HTML 属性を設定できます。
例 1: attr() を使用して無効な属性を追加します
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$("textarea").attr("disabled", "disabled");
// $("textarea").attr("disabled","true");
});
});
</script>
</head>
<body>
<textarea></textarea><br><br>
<button>让textarea不可编辑</button>
</body>
</html>
例 2: prop() を使用して読み取り専用属性を追加します
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$("input").attr("readonly","readonly");
});
});
</script>
<style type="text/css">
.intro {
font-size: 120%;
color: red;
}
</style>
</head>
<body>
<input type="text" value="hello"/><br /><br />
<button>给input添加只读属性</button>
</body>
</html> 
2. 属性を削除するには、removeAttr() を使用します。
#removeAttr() メソッドは、選択した要素から属性を削除します。 例: 隠し属性を削除するには、removeAttr() を使用します。隠し属性は、要素が非表示であることを指定します。非表示の要素は表示されません。 要素を表示できるようにするには、この属性を削除します。<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-3.2.1.min.js"></script>
<script>
$(function () {
$("button").click(function () {
$("p").removeAttr("hidden");
})
})
</script>
</head>
<body>
<p>这是一段可见的段落。</p>
<p hidden="hidden">这是一段被隐藏的段落，现在显示出来了。</p>
<p>这是一段可见的段落。</p>
<button>删除hidden属性</button>
</body>
</html>
以上がjqueryで属性を追加および削除する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：jQuery の子とは何を意味しますか?次の記事：jQuery の子とは何を意味しますか?