JQueryを使用してCSSスタイルを変更する方法

PHPz
リリース: 2023-04-26 15:26:43
オリジナル
2891 人が閲覧しました

JQuery は現在最も人気のある JavaScript ライブラリの 1 つで、開発者はこれを使用して HTML ページをより簡単に操作できます。最も基本的でよく使用される機能の 1 つは、JQuery を使用して CSS スタイルを変更することです。

1. JQuery で CSS スタイルを変更するための基本構文

JQuery では、.css() メソッドを使用して要素の CSS スタイルを変更します。構文は次のとおりです:

$(selector).css(property,value)
ログイン後にコピー

ここで、 selector は変更する必要がある要素、 property は変更する CSS 属性、 value は属性の新しい値です。たとえば、要素の背景色を赤に変更できます。

$("#myDiv").css("background-color", "red");
ログイン後にコピー

2. JQuery を使用して CSS スタイルを変更する方法

  1. CSS プロパティ値を直接変更します

.css() メソッドを使用して、CSS プロパティの値を新しい値に直接設定できます。たとえば、フォントの色を青に設定します。

$("#myDiv").css("color", "blue");
ログイン後にコピー

注: css() メソッドは、指定された要素のインライン スタイル (つまり、要素タグに記述されたスタイル) のみを変更し、変更はしません。外部スタイルシートのルールに影響します。

  1. CSS クラスの切り替え

.addClass() メソッドを使用して要素に CSS クラスを追加し、.removeClass() メソッドを使用して CSS クラスを削除できます。 。次の例は、ボタンをクリックして div のクラスを切り替える方法を示しています。

$("#btnToggle").click(function(){
  $("#myDiv").toggleClass("active");
});
ログイン後にコピー

.toggleClass() メソッドは、指定されたクラス名を追加または削除します。

  1. 複数の CSS プロパティを設定する

複数の CSS プロパティと値を一度に設定できます。 .css() メソッドにオブジェクトを渡すだけです。たとえば、ボーダー、幅、高さ、およびパディングを同時に同じ値に設定します。

$("#myDiv").css({
  "border": "1px solid #000",
  "width": "50px",
  "height": "50px",
  "padding": "10px"
});
ログイン後にコピー
  1. CSS 属性値を取得します

を使用できます。 css() メソッドで取得します。 要素の CSS プロパティ値を指定します。たとえば、要素の背景色を取得します。

var backgroundColor = $("#myDiv").css("background-color");
ログイン後にコピー

.css() メソッドを通じて、ページ要素の CSS スタイルを柔軟に変更して取得し、より豊富なユーザー インタラクション効果を実現できます。

以上がJQueryを使用してCSSスタイルを変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート