jqueryを使用してCSSスタイルを動的に変更する方法

jquery で CSS スタイルを動的に変更する方法: 1. CSS メソッドを使用して CSS スタイルを動的に変更する; 2. 指定された HTML 要素に CSS スタイルを設定する; 3. 要素の CSS スタイルを表示する; 4. 非表示にするp またはその他の指定された HTML 要素を表示します。

この記事の動作環境: Windows 7 システム、jquery バージョン 3.2.1、Dell G3 コンピューター。

jquery は CSS スタイルを動的に変更するメソッドを実装します。

詳細は次のとおりです。

jquery は、そのシンプルさと使いやすさから、WEB アプリケーション開発の標準 JS ライブラリとしてほぼ定着しています。バックエンド開発者としてフロントエンド ページを作成する場合、CSS スタイルの制御を習得することが不可欠です。静的 CSS の場合は、もちろん直接記述することができますが、一部のインターフェイスでは、色の変更、フォント サイズの変更、さらには現実に隠された p などの動的な効果が必要です。これらはすべて、CSS スタイルを動的に制御するために JavaScript を必要とします。 . 以下は、CSS スタイルを制御するために一般的に使用される jquery メソッドの概要です。

1. ハイパーリンクのスタイルを変更します
2. 指定された CSS スタイルを指定された HTML 要素に付与します
3 . 要素の CSS スタイルを表示します。
4. p またはその他の指定された HTML 要素を表示または非表示にします。

#1. ハイパーリンクのスタイルを変更します。#

$("#mylink a").css('color','#111111');
//这里选择器‘$("#mylink a")'表示ID为'#mylink'的元素下的所有链接。
//.css(‘color','#111111');表示把颜色设为'#111111'

2. 定義された CSS スタイルを指定された HTML 要素に割り当てます

##1.

.mystyle{width:200px;height:100px;}

などの外部 CSS ファイルに CSS スタイルを作成し、jquery を使用できます。値を割り当てる

$("#result").css(mystyle);

2. CSS オブジェクト (つまり、JavaScript オブジェクト) を定義して、値を割り当てることができます

var pcss = {
 background: '#EEE',
   width: '478px',
   margin: '10px 0 0',
   padding: '5px 10px',
   border: '1px solid #CCC'
};
$("#result").css(pcss);

このメソッドは、外部リンク メソッドと似ています。個人的には外部リンク方法を推奨します。

3. 要素の CSS スタイルを表示

#

var mycolor=$("#mylink a").css("color");
if ($('#myp').css('display')=="none"){...}
//和第一个例子相似，但是这里我们只传递一个参数(样式属性)

##4. 表示 p または他の要素で非表示

1. CSS メソッドを直接変更する

$('#myp').attr('style','display:none;');//隐藏
$('#myp').attr('style','display:block;');//显示

推奨学習: "jquery ビデオ チュートリアル

"

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