ホームページ >ウェブフロントエンド >フロントエンドQ&A >jQueryのスタイル部分を削除する方法
jQueryのスタイル部分を削除する方法
- 青灯夜游オリジナル
- 2022-09-09 19:05:345646ブラウズ
スタイルを削除する 2 つの方法: 1. style 属性によって設定されたスタイルを削除するには、removeAttr() 関数を使用します。構文は、「$(selector).removeAttr("style");」です。 2. empty() 関数を使用して、スタイル タグの内容をクリアし、スタイル タグのスタイルを削除します。構文は「$("style").empty();」です。
このチュートリアルの動作環境: Windows7 システム、jquery3.6.1 バージョン、Dell G3 コンピューター。
HTML では、スタイル スタイルは 2 つの状況に分けられます:
-
1. style 属性に含まれるスタイル
style 属性が中心ですHTML の属性。要素のインライン スタイルを指定するために使用します。
style 属性は、
-
2. style タグに含まれるスタイル
style タグは、HTML ドキュメントのスタイル情報を定義します。
style 要素では、HTML ドキュメントがブラウザーでどのようにレンダリングされるかを指定できます。
JQuery には、状況に応じてさまざまな削除方法があります。
1. jqueryのremoveAttr()メソッドを使用してスタイル属性を削除します
removeAttr()メソッドは、選択した要素から属性を削除するために使用されます。
構文:
$(selector).removeAttr(attribute)
属性: 必須。指定した要素から削除する属性を指定します。
例: 最初の p 要素の style 属性を削除します
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-3.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$("p:first").removeAttr("style");
});
});
</script>
</head>
<body>
<h1>这是一个大标题</h1>
<p style="font-size: 120%;color: blue;background-color: yellow;">这是一个段落。</p>
<p style="font-size: 120%;color: blue;background-color: yellow;">这是另一个段落。</p>
<button>移除第一个 p 元素的style属性</button>
</body>
</html>
##2. jquery empty() メソッドを使用して、スタイル タグのコンテンツをクリアします
empty() メソッドは、選択した要素のすべての子ノードとコンテンツを削除しますが、選択した要素は削除しません。<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-3.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$("style").empty();
});
});
</script>
<style>
h1{
color: coral;
}
p{
font-size: 120%;
color: blue;
background-color: yellow;
}
</style>
</head>
<body>
<h1>这是一个大标题</h1>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>清空style标签样式</button>
</body>
</html>
jQuery ビデオ チュートリアル 、Web フロントエンド開発ビデオ ]
以上がjQueryのスタイル部分を削除する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。