Get the App
SLTechnology News&Howtos  ›  Development  › 

Can you add styles with jquery?

Shulou Source: shulou.com Published: 2022-06-02 12:30:42 09月22日 Update

This article is to share with you about whether you can add styles with jquery. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Use jquery can add style, method: 1, use "$(element). Attr (" style "," inline style code ")" statement; 2, use "$(element) .css ({" attribute name ":" attribute value "})" statement; 3, use "$(element) .addClass (" class name ") statement.

The operating environment of this tutorial: windows7 system, jquery1.10.2 version, Dell G3 computer.

In jquery, there are several ways to add styles to elements, here are a few:

Method 1: add inline styles using the attr () method

$(document) .ready (function () {$("button") .click (function () {$("p") .attr ("style", "border: 2px solid green; background-color: # 55aa7f 2px solid green; background-color: white;");})

Hello, test text

Add Styl

Method 2: use the css () method

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

$(document) .ready (function () {$("button") .click (function () {$("p") .css ({"border": "1px solid red", "background-color": "# FFC0CB", "color": "white"});})

Hello, test text

Add Styl

Method 3: use the addClass method

The addClass () method adds one or more classes to the selected element.

$(document) .ready (function () {$("button") .click (function () {$("p"). AddClass ("intro");}) .intro {font-size: 120%; color: red;}

Hello, test text

Add Styl

Thank you for reading! This is the end of the article on "whether you can add style with jquery". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Tags: Styles methods elements attributes text statements tests but not content more articles good practical code names multiple tutorials articles versions Apple Docker Huawei Linux macOS MariaDB Microsoft MySQL NVidia OPPO Reno vpn MySQL Redmi Linux Xiaomi