ホームページ > 記事 > ウェブフロントエンド > jqueryで要素の幅をクリアする方法
jqueryで要素の幅をクリアする方法
- 青灯夜游オリジナル
- 2022-11-02 19:58:101764ブラウズ
3 メソッド: 1. width() を使用して幅を 0 に設定し、構文 "$("指定された要素").width("0");"; 2. css() を使用して幅を設定しますwidth 属性 width の値は 0 に設定され、構文は "$("specified element").css("width","0");"; 3. attr() を使用して width の値を次のように設定します。 0 の場合、構文は「$("指定された要素 ").attr("style","width:0");」です。
このチュートリアルの動作環境: Windows7 システム、jquery3.6.1 バージョン、Dell G3 コンピューター。
要素の幅(width)をクリアするとは、要素のwidth属性(スタイル)をクリアする(属性値を0に設定する)ことを意味します。
jquery で要素の幅 (width) をクリアする 3 つの方法
1. width() を使用して幅を 0 に設定します
width() メソッドは、一致する要素の幅を返すか設定します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="js/jquery-3.6.1.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("#box").width("0");
});
});
</script>
<style>
p{
width: 100px;
height: 20px;
border: 1px solid red;
overflow: hidden;
}
</style>
</head>
<body>
<p>一个段落</p>
<p id="box">一个段落</p>
<br><br><br>
<button>清除元素的宽度</button>
</body>
</html>
2. css() を使用して width 属性の値を 0
css() メソッドで設定できます要素の選択された 1 つ以上のスタイル属性。
構文:
$(selector).css(name,value)
| パラメータ | 説明 |
|---|---|
| 名前## ＃＃＃＃＃＃＃必須。 CSS プロパティの名前を指定します。このパラメータには、「color」などの任意の CSS プロパティを含めることができます。 | #値 |
| オプション。 CSS プロパティの値を指定します。このパラメータには、「red」などの任意の CSS プロパティ値を含めることができます。 | 空の文字列値が設定されている場合は、指定された属性を要素から削除します。名前を「width」、値を「0」に設定するだけです。 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="js/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("p").css("width","0");
});
});
</script>
<style>
p{
width: 100px;
height: 20px;
border: 1px solid red;
overflow: hidden;
}
</style>
</head>
<body>
<p>一个段落</p>
<p>一个段落</p>
<br>
<button>清除元素的宽度</button>
</body>
</html> 方法 3: attr() を使用して幅の値を 0
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="js/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("p").attr("style","width:0");
});
});
</script>
<style>
p{
width: 100px;
height: 20px;
border: 1px solid red;
overflow: hidden;
}
</style>
</head>
<body>
<p>一个段落</p>
<br>
<button>清除元素的宽度</button>
</body>
</html>[推奨学習:
jQuery ビデオ チュートリアル 
以上がjqueryで要素の幅をクリアする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。