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

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • CSSカスタムスクロールバースタイルケースの詳細な説明
  • CSS、スタイルの基本を理解する
  • Vue における CSS スタイル浸透問題の詳細な説明
  • BootStrap CSS グローバル スタイルとテーブル スタイルのソース コード分析
  • CSS ページスタイルコード
  • CSS の 3 つの主要なスタイルについてどれくらい知っていますか?

<<:  Windows で MySQL マスター スレーブ レプリケーションを構成する方法

>>:  各 Nginx プロセスで開くことができるファイルの最大数を設定する方法

推薦する

MySQLエラー10061を解決する方法

この記事では、「'localhost' (10061) の MySQL サーバーに接...

CentOS 上での MySQL 5.6 のコンパイルとインストール、および複数の MySQL インスタンスのインストールの詳細な説明

--1. mysql用の新しいグループとユーザーを作成する # ユーザー追加 -M -s /sbin...

サーバー間のファイル バックアップ ソリューション、サーバー ファイルを別のサーバーに自動的にバックアップする方法は?

多くの組織ではファイル サーバーをバックアップする必要があり、あるサーバーから別のファイル サーバー...

CentOSはローカルyumソース/Alibaba Cloud yumソース/163yuanソースを設定し、yumソースの優先順位を設定します。

1. Centosイメージを使用してローカルのyumソースをビルドするCentOS をインストール...

jsは水平および垂直スライダーを実現します

最近、練習プロジェクトをしていたときにスライダーを使う必要があったので、調べてみました。まず、水平ス...

初心者がdockerにmysqlをインストールするときに遭遇するさまざまな問題

序文最近、パソコンのシャットダウンに時間がかかることが多く、強制的にシャットダウンするには電源ボタン...

はじめに: HTML の基本的なタグと属性の簡単な紹介

HTML はタグと属性で構成されており、これらを組み合わせてブラウザにページの表示方法を指示します。...

Linux環境でOpenSSL証明書を生成する

1. 環境: CentOS7、OpenSSL1.1.1k。 2. コンセプト:ルート証明書: サーバ...

React仮想リストの実装

目次1. 背景2. バーチャルリストとは何か3. 関連概念の紹介4. 仮想リストの実装4.1 ドライ...

デザイン理論:人間中心のデザインコンセプト

<br />思想が東西に分かれていた時代、東洋の叡智を代表するものの一つとして「禅」は多...

Windows での MySQL 5.7.10 のインストールと設定のチュートリアル

MySQL は、ユーザーごとに 2 つの異なるバージョンを提供します。 MySQL コミュニティ サ...

要素のフォームコンポーネントに関する注意事項

要素フォームとコード表示詳細はエレメントフォーム公式サイトをご覧ください構造と機能の分析紹介とソース...

MySQL マスタースレーブレプリケーションのいくつかのレプリケーション方法の概要

非同期レプリケーションMySQL レプリケーションは、デフォルトでは非同期です。マスター スレーブ ...

WeChat ミニプログラム 宝くじ番号ジェネレーター

この記事では、WeChatアプレットの宝くじ番号ジェネレータの具体的なコードを参考までに紹介します。...