jqueryは入力の背景色を設定します-フロントエンドQ&A-php.cn

jqueryは入力の背景色を設定します

PHPz

リリース： 2023-05-28 13:16:40

オリジナル

874 人が閲覧しました

jQuery は、HTML 要素を操作し、入力の背景色の設定などのイベントを処理するための便利なメソッドを提供する JavaScript フレームワークです。この記事ではjQueryで入力の背景色を設定する方法を紹介します。

まず、jQuery ライブラリを HTML ページに導入する必要があります。これは、次のコードをタグに追加することで実現できます:

<head>
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
</head>

ログイン後にコピー

次に、jQuery で選択するために背景色を設定する必要がある input 要素に id 属性を追加します。たとえば、ページに入力ボックスを追加し、「input1」という名前の ID を指定できます。

<input type="text" id="input1" placeholder="请输入内容...">

ログイン後にコピー

次に、ページが読み込まれた後、jQuery のready() メソッドを使用して入力ボックスを取得できます。そして背景色を設定します。 ready() メソッドは、ページのすべての要素がロードされた後に実行されます。具体的なコードの実装は次のとおりです。

$(document).ready(function(){
  // 获取输入框元素
  var inputElement = $('#input1');
  
  // 设置背景色为红色
  inputElement.css('background-color', 'red');
});

ログイン後にコピー

上記のコードでは、まず $() 関数を使用して入力ボックス要素を取得し、次に css() メソッドを使用してその背景色を赤に設定します。このうち css() メソッドは、jQuery で CSS プロパティを設定および取得するために使用されるメソッドです。

背景色の設定に加えて、他の CSS プロパティを設定して要素のスタイルを変更することもできます。たとえば、フォントサイズ、フォントの色、枠線などを設定できます。以下にサンプルコードを示します。

// 设置字体大小为18px
inputElement.css('font-size', '18px');

// 设置字体颜色为绿色
inputElement.css('color', 'green');

// 设置边框为1px的黑色边框
inputElement.css('border', '1px solid black');

ログイン後にコピー

結論として、jQuery を使用すると、HTML 要素を簡単に操作し、そのスタイルを変更できます。この紹介があなたのお役に立てば幸いです。

以上がjqueryは入力の背景色を設定しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。