jqueryでボタンをクリックしてスタイルの行を削除する方法-フロントエンドQ&A-php.cn

jqueryでボタンをクリックしてスタイルの行を削除する方法

WBOY

リリース： 2022-01-14 12:11:48

オリジナル

1522 人が閲覧しました

方法: 1. 「.class」セレクターを使用して、指定した要素行のスタイルを設定します; 2. クリックイベントをボタンにバインドし、処理関数を指定します; 3. RemoveClass() を使用します。指定を削除する関数内のメソッド行要素のクラスを指定することで、スタイルの行を削除できます。構文は「element object.removeClass("指定されたクラス")」です。

jqueryでボタンをクリックしてスタイルの行を削除する方法

このチュートリアルの動作環境: Windows10 システム、jquery3.2.1 バージョン、Dell G3 コンピューター。

jquery のボタンをクリックしてスタイルの行を削除する方法

.class セレクターを使用して、指定した要素のスタイルを設定できます。

このように、要素のスタイルを一括で削除することができます。スタイルはcssメソッドでも削除できますが、直接削除できないため、removeClassメソッドを使用します。

removeClass() メソッドは、選択した要素から 1 つ以上のクラスを削除します。

例は次のとおりです。

<html>
<head>
<meta charset="utf-8">
<title>123</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").removeClass("intro");
});
});
</script>
<style type="text/css">
.intro{
font-size:120%;
color:red;
}
</style>
</head>
<body>
<h1>这是一个标题</h1>
<p class="intro">这是一行段落。</p>
<p >这是另一行段落。</p>
<button>移除指定一行的样式</button>
</body>
</html>

ログイン後にコピー

出力結果:

jqueryでボタンをクリックしてスタイルの行を削除する方法