jQuery の CSS スタイル属性 css() と width() の完全ガイド

1. css() の基本的な使用法:

1.1 CSSプロパティを取得する

1.1.1 単一の属性値を取得する（文字列を渡す）

div {
    幅: 100ピクセル;
    高さ: 100px;
    背景: 赤;
}

<div>div1</div>
<script src="./jQuery/jquery-3.6.0.js"></script>
<スクリプト>
    console.log( $('div').css('width') );
    console.log( $('div').css('background') );
</スクリプト>

効果: 背景は複合属性であるため、その値を取得すると、そのすべての属性がリストされます。

ここに画像の説明を挿入

1.1.2 複数の属性値を取得する（配列を使用）

console.log( $('div').css(['width', 'background']) );

効果：取得した複数の属性値はオブジェクトの形式で返されます

ここに画像の説明を挿入

1.2 CSSプロパティの設定

1.2.1 単一のプロパティ値の設定（文字列を使用）

$('div').css('color', 'white');

効果: フォントが白くなる

ここに画像の説明を挿入

1.2.2 複数のプロパティ値の設定（オブジェクトを使用）

$('div').css({
    色: '白'、
    幅: '200px'
    //ここでは '200'、'200px'、または 200 と記述できます。デフォルトの単位はピクセルです});

効果: フォントの色は白になり、divの幅は200pxになります

ここに画像の説明を挿入

1.2.3 デモ: div をクリックするたびに幅が 100 ピクセルずつ増加します

$('div').クリック(
    $(これ).css({
    width: '+=100'}) // 現在の幅属性を自動的に取得し、100px を追加します
）

効果：

ここに画像の説明を挿入

2. width() シリーズの基本的な使用法 (height() シリーズも同様)

2.1 幅()

2.1.1 幅の値を取得する

dom.css('width') と比較すると、css('width') の結果はピクセル値と単位を含む文字列になります。
width() の結果は文字列ではなく単位のない数値なので、加算や減算に便利です。

console.log( $('div').css('width') ); // '100px'
console.log( $('div').width() ); //100 数値型

2.1.2 幅の値を設定する

// console.log( $('div').css('width','200px') );
console.log( $('div').width('200px') );

2.2 innerWidth() と outerWidth()

2.2.1 価値の比較

div {
    幅: 100ピクセル;
    高さ: 100px;
    パディング: 30px;
    境界線: 20px 実線オレンジ;
    マージン: 10px;
    背景: 赤;
}

console.log( $('div').width() ); //100 = コンテンツ
console.log( $('div').innerWidth() ); //160 = コンテンツ + パディング
console.log( $('div').outerWidth() ); //200 = コンテンツ + パディング + 境界線
console.log( $('div').outerWidth(true) ); //220 = コンテンツ + パディング + 境界線 + 余白

ここに画像の説明を挿入

2.2.2 設定値: コンテンツの幅のみ変更

$('div').innerWidth('100'); //コンテンツ+パディングの合計値を100pxに変更します。パディングは変更されず、コンテンツの幅は40pxになります。
$('div').innerWidth('50'); //パディングは変更されず、コンテンツは0になります
$('div').outerWidth('150');//content+padding+border=content+30*2+20*2=150、content=50
$('div').outerWidth('50');//content+30*2+20*2=50、content=0、padding、margin、border は変更されません

ボックスモデル図は次のようになります。設定された幅が前の設定よりも小さい場合、パディング、ボーダー、マージンは変更されず、コンテンツのみが0に達するまで縮小されます。

ここに画像の説明を挿入

幅は元より大きく設定し、コンテンツのみを広げます

$('div').innerWidth('300');

ここに画像の説明を挿入

3. offset() と position()

3.1 価値の比較

offset()はドキュメントに対する要素の位置を取得します。position()は最も近い位置にある親に対する位置を取得します。

3.1.1 親が位置を設定しない

.ラッパー{
    幅: 300ピクセル;
    高さ: 300px;
    マージン: 100px;
    背景: #ccc;
}
。コンテンツ {
    位置: 絶対;
    左: 150px;
    上: 150px;
    幅: 100ピクセル;
    高さ: 100px;
    背景: 赤;
}

<div class="wrapper">
    <div class="content"></div>
</div>
<script src="./jQuery/jquery-3.6.0.js"></script>
<スクリプト>
    console.log($('.content').offset());
    console.log($('.content').position());
</スクリプト>

効果: ラッパーには位置決めがないため、コンテンツに最も近い位置は本体であり、位置の値は本体に対して相対的になります。
オフセットによって返されるオブジェクトは、もともとドキュメントに対して相対的に配置されます（body: 8px のデフォルトの余白は、折りたたまれたためになくなります）

ここに画像の説明を挿入

3.1.2 親の設定位置

ラッパーが位置を設定する場合:

.ラッパー{
    位置: 相対的;
    上: 100px;
    左: 100px;
    幅: 300ピクセル;
    高さ: 300px;
    背景: #ccc;
}
。コンテンツ {
    位置: 絶対;
    左: 100px;
    上: 100px;
    幅: 100ピクセル;
    高さ: 100px;
    背景: 赤;
}

効果：

ここに画像の説明を挿入

3.2 設定値の比較

position() は手動で設定できませんが、offset() は手動で設定できます。

$('.content').offset({
    残り: 50,
    トップ: 50
});

効果: 相対的なドキュメントの位置

ここに画像の説明を挿入

4. scrollLeft() と scrollTop()

scrollLeft(): 水平スクロールバーの値を左側から取得します。
scrollTop(): 垂直スクロールバーの距離より上の値を取得します

4.1 価値

.ラッパー{
    幅: 400ピクセル;
    overflow: auto;/*水平および垂直スクロールバーのキー*/
}
。コンテンツ {
    表示: インラインブロック;
    幅: 100%;
    高さ: 100%;
}

$('.content').offset({
    残り: 50,
    トップ: 50
});

効果：

ここに画像の説明を挿入

親 (.wrapper) の値を取得するには、親が body の場合は、ドキュメントで直接値を取得できます: $(document).scrollLeft()

4.2 値の設定

ここに画像の説明を挿入

垂直スクロールバーは上方向にスクロールします。スクロール距離は、テキストコンテンツが上方向に移動する距離と、スクロールバーが下に引っ張られる距離です。

ここに画像の説明を挿入

4.3 小さなデモ

機能: 記事を読んでいるときに、スクロールバーが一定の間隔で自動的に上にスライドして次のコンテンツを表示するので、手動でスクロールする必要がなくなります。

。コンテンツ {
    幅: 400ピクセル;
}

テキストコンテンツは、content というクラス名を持つ div で囲まれています。

ここに画像の説明を挿入

機能実装コード:

var タイマー;
var newTop;
タイマー = setInterval(関数() {
    newTop = $(document).scrollTop();
    (newTop + $(window).height() >= $('body').height()) の場合 {
        タイマーの間隔をクリアします。
    } それ以外 {
        console.log('タイマー');
        $(ドキュメント).scrollTop(newTop + 20);
    }

}, 100)

本文の高さはコンテンツによって拡張されるため、 $('body').height() $('.content').height()
スクロールバーのスクロール距離 + 表示ウィンドウの高さ >= 実際のテキストの高さの場合、スクロールバーが下まで引き下げられ、タイマーをクリアできることを意味します。

ここに画像の説明を挿入

効果: 下に引き続けると、一番下に到達するとタイマーがクリアされます。

ここに画像の説明を挿入

最後に底まで届かない小さな部分があることがわかります。

ここに画像の説明を挿入

これは、ボディのマージンがデフォルトで8pxあるためです。これをキャンセルするだけです。

さらに、判断条件の理解を強化するために、この自動スクロール効果を配置する div を描画してみてください。

体 {
    マージン: 0;
}
.ラッパー{
    高さ:400px;
    幅: 400ピクセル;
    オーバーフロー:自動;
}

。コンテンツ {
    
    表示: インラインブロック;
    幅: 100%;
}

テキストコンテンツはラッパーで囲まれています

var タイマー;
var newTop;
タイマー = setInterval(関数() {
    新しいTop = $('.wrapper').scrollTop();
    (Math.round(newTop + $('.wrapper').height()) >= Math.round($('.content').height())) の場合 {
        タイマーの間隔をクリアします。
        console.log('クリア');
    } それ以外 {
        console.log('タイマー');
        $('.wrapper').scrollTop(newTop + 20);
    }

}, 100)

ここに画像の説明を挿入

jQuery の CSS スタイル属性 css() と width() に関する記事シリーズはこれで終了です。jQuery の CSS スタイル属性の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: