How to Define Multiple CSS Attributes in jQuery ? Last Updated : 26 Apr, 2023 Comments Improve Suggest changes Like Article Like Report In jQuery, you can define multiple CSS attributes for an element using the css() method. This method allows you to set one or more CSS properties for an element. In this article, we will see the different ways to define multiple CSS attributes in jQuery. Syntax: The syntax for defining multiple CSS attributes using the jQuery css() method. $(selector).css({ propertyName1 : value1, propertyName2 : value2, ... propertyNameN : valueN, });Where, '$(selector)' is the element(s) you want to apply the CSS to.The 'propertyName1 : value1', 'propertyName1 : value2', etc. are the CSS attributes and their corresponding values you want to set for the element(s). Approaches: There are two approaches to defining multiple CSS attributes in jQuery. Using an object literal: You can pass an object literal containing the CSS attributes and their value to the css() method.Using individual arguments: You can pass each CSS attribute and its value as separate arguments to the css() method.Example 1: In this example, we are using an object literal to define multiple CSS attributes, i.e., we are using an object literal to define the 'color', 'background-color', and 'font-size' CSS attributes for the element with the ID 'myElement'. HTML <!DOCTYPE html> <html> <head> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"> </script> </head> <body style='text-align:center'> <h1 style='color:green'> Geeksforgeeks </h1> <h2 id='myElement'> Define multiple CSS attributes </h2> <script> $('#myElement').css({ 'color' : 'red', 'background-color' : 'yellow', 'font-size' : '24px' }); </script> </body> </html> Output: Example 2: in this example, we are using individual arguments to define multiple CSS attributes, i.e., we are using individual arguments to define the 'color ', 'background-color', and ' font-size' CSS attributes for the element with the ID 'myElement '. We are chaining the css() method to apply each attribute separately. HTML <!DOCTYPE html> <html> <head> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"> </script> </head> <body style='text-align:center'> <h1 style='color:green'> Geeksforgeeks </h1> <h2 id='myElement'> Define multiple CSS attributes </h2> <script> $('#myElement').css('color' , 'red') .css('background-color' , 'yellow') .css('font-size' , '24px'); </script> </body> </html> Output: Comment More infoAdvertise with us Next Article How to Define Multiple CSS Attributes in jQuery ? S shivrajk24 Follow Improve Article Tags : Web Technologies JQuery jQuery-Questions Similar Reads How to get custom element attribute data in jQuery ? Apart from attributes, we can also use custom element attributes. In this article, we will learn how to get the value of a custom attribute in an HTML element using jQuery. What is Attribute? The HTML attribute provides information about the element. It decides the behavior of an element. Examples o 3 min read How to Filter Objects by Data Attribute Value in jQuery ? In this article, we will learn how to filter objects by their data attribute value in jQuery. There are two approaches that can be taken to achieve this: Approach 1: Using the this property and filter(), data() and css() methods in the jQuery library. There are four division elements that are define 3 min read How to Add and Remove multiple classes in jQuery ? Given an HTML element and the task is to add and remove multiple classes from it using JQuery. Approach: First select the element to which multiple classes will be added. Then use addClass() method to add multiple classes to the element and removeClass() method to remove multiple classes. Example 1: 2 min read How to Add Attributes to an HTML Element in jQuery? To add attributes to an HTML element in jQuery, the attr() method can be used. This allows to set one or more attributes for a selected element, such as id, class, src, and href.Approach: Given an HTML document containing <label>, <input>, and <button> elements. The <input> e 1 min read How to Toggle Between Two Classes in jQuery ? In this article, we will see how to toggle between two classes in jQuery. To make the classes toggle, we will use toggleClass() method. The toggleClass() method is used to toggle or switch the class with the selected class element. Syntax: $(selector).toggleClass(class1 class2) Example 1: In this ex 2 min read How to use *= operator in jQuery attribute selector ? This article will show you an idea of using the *= operator in jQuery attribute selectors. The *= operator is used to select the sub-string attribute and apply operations on it. Syntax: $("div[myAttr*='GFG']").jQueryMethod({ // Code }) Approach: We will create HTML div elements with some attributes. 2 min read How to remove CSS âtopâ and âleftâ attribute with jQuery ? Method 1: Using the css() method: The css() method is used to get or set CSS properties of a selected element. It takes two arguments, the first argument is the property that has to be set and the second argument is the value that it has to be set to. The 'top' value can be effectively disabled by u 3 min read How to use OR Operation in jQuery Attribute Selectors ? In this article, we will see how to use OR operation in jQuery Attribute Selectors. To use the OR operation in the attribute selector, we will use the comma operator (,) on attributes or attribute values. Syntax: $(".class1, .class2, ...") { // Code } Approach: First we will create some HTML div ele 2 min read How to declare a custom attribute in HTML ? In this article, we will learn how to declare a custom attribute in HTML. Attributes are extra information that provides for the HTML elements. There are lots of predefined attributes in HTML. When the predefined attributes do not make sense to store extra data, custom attributes allow users to crea 2 min read How to use input readonly attribute in jQuery ? Use jQuery methods to add the readonly attribute to the form input field. jQuery attr() Method: This method set/return attributes and values of the selected elements. If this method is used to return the attribute value, it returns the value of the first selected element.If this method is used to se 3 min read Like