jquery sets input background color-Front-end Q&A-php.cn

jquery sets input background color

PHPz

Release： 2023-05-28 13:16:40

Original

855 people have browsed it

jQuery is a JavaScript framework that provides convenient methods to operate HTML elements and handle events, including setting the background color of the input. This article will introduce how to set the background color of input in jQuery.

First, you need to introduce the jQuery library into the HTML page. This can be achieved by adding the following code to the tag:

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

Copy after login

Next, add an id attribute to the input element where the background color needs to be set for selection in jQuery. For example, you can add an input box to the page and give it an id named "input1":

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

Copy after login

Then, after the page is loaded, you can use jQuery's ready() method to get the input box and set its background color. The ready() method is run after all elements of the page have been loaded. The following is the specific code implementation:

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

Copy after login

In the above code, first use the $() function to obtain the input box element, and then use the css() method to set its background color to red. Among them, the css() method is the method used in jQuery to set and get CSS properties.

In addition to setting the background color, you can also change the style of the element by setting other CSS properties. For example, you can set font size, font color, borders, and more. Here is some sample code:

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

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

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

Copy after login

In conclusion, by using jQuery you can easily manipulate HTML elements and change their styles. I hope this introduction will be helpful to you.

The above is the detailed content of jquery sets input background color. For more information, please follow other related articles on the PHP Chinese website!