ホームページ > 記事 > ウェブフロントエンド > jqueryで背景画像を繰り返さないようにする方法
jqueryで背景画像を繰り返さないようにする方法
- 青灯夜游オリジナル
- 2022-06-10 15:25:283089ブラウズ
背景画像を非繰り返しにする 2 つの方法: 1. css() を使用して、background-repeat 属性を要素に追加します。構文 "$("specified element").css("background-繰り返し"、"-繰り返しなし")"。 2. attr() を使用して要素に背景の繰り返しスタイルを追加します。構文は "$("指定された要素").attr("style","background-repeat:no-repeat")" です。
このチュートリアルの動作環境: Windows7 システム、jquery3.6.0 バージョン、Dell G3 コンピューター。
jquery を使用して背景画像を繰り返さないようにする 2 つの方法
方法 1: css() を使用して背景を追加します。 repeatattribute
css() は、一致した要素の 1 つ以上のスタイル属性を設定できます。このメソッドを使用して、background-repeat 属性を要素に追加し、属性値を「no-repeat」に設定するだけです。
<!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() {
$("div").css("background-repeat","no-repeat");
});
});
</script>
<style>
div{
height: 150px;
background-image: url(img/nz.png);
}
</style>
</head>
<body>
<div></div>
<br>
<button>让背景图片不重复</button>
</body>
</html>
方法 2: attr() を使用して style 属性を設定し、background-repeat スタイルを追加します
attr()メソッドは選択した要素の属性値を設定できます。このメソッドを使用して要素の style 属性を設定し、その属性値を「background-repeat:no-repeat」に設定するだけです。
コア コードの実装:
$(document).ready(function() {
$("button").click(function() {
$("div").attr("style","background-repeat:no-repeat");
});
});
[推奨学習: jQuery ビデオ チュートリアル 、Web フロントエンドビデオ＃ ＃＃】＃＃＃
以上がjqueryで背景画像を繰り返さないようにする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。