Home > Web Front-end > JS Tutorial > How to add css attributes in jquery

How to add css attributes in jquery

藏色散人
Release: 2021-05-27 10:54:19
Original
3226 people have browsed it

The way jquery adds css attributes is the css() method. This method can set or return one or more style attributes of the selected element. The syntax for setting and adding css attributes is "css("propertyname", "value");".

How to add css attributes in jquery

The operating environment of this article: Windows7 system, jquery3.2.1&&css3 version, DELL G3 computer

jQuery css() method

css() method sets or returns one or more style properties of the selected element.

Return CSS properties

If you need to return the value of the specified CSS property, please use the following syntax:

css("propertyname");
Copy after login

Set CSS properties

To set a specific CSS property, please use the following syntax:

css("propertyname","value");
Copy after login

The following example will set the background-color value for all matching elements:

Example

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").css("background-color","yellow");
  });
});
</script>
</head>

<body>
<h2>这是标题</h2>
<p style="background-color:#ff0000">这是一个段落。</p>
<p style="background-color:#00ff00">这是一个段落。</p>
<p style="background-color:#0000ff">这是一个段落。</p>
<p>这是一个段落。</p>
<button>设置 p 元素的背景色</button>
</body>
</html>
Copy after login

Effect:

How to add css attributes in jquery

Recommended learning: "jquery video tutorial"

The above is the detailed content of How to add css attributes in jquery. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template