Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Which methods are used to set styles on selected elements in jQuery?
Developers can use JavaScritp or JQuery to manipulate the style of the HTML elements. For that, first, developers need to access the HTML elements using JQuery and then use various methods to set the style for selected HTML elements.
Sometimes, we require to manage elements styles using JQuery. For example, when users click the button, we need to change the text's colour, image dimensions, etc. In this case, we can use the JQuery methods below to change the HTML elements' style.
Use the CSS() method of JQuery to set styles on selected elements
The first method is the css() method which we can use to set styles on selected HTML elements using JQuery. It takes a property name and value as a parameter.
Syntax
Users can follow the syntax below to use the css() method of JQuery.
$("selector").css("property", "value");
In the above syntax, the selector is a CSS selector to access the HTML element.
Parameters
Property − It is the name of the CSS property to apply to the HTML element.
Value − It is a value of the CSS property.
Example
In this example, we have included the JQuery script in the <head> tag to use it. After that, we have created the two div elements. The first div contains ‘one’ as a class name, and the second div contains the ‘second’ as an id.
In JQuery, we access both div using id and class name, respectively, and apply different colours to the text of both. Also, we access the ‘div’ element by tag name and change the font size of the text, which users can observe in the output.
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>
<body>
<h2>Using the CSS() method of jQuery to set style on selected HTML elements</h2>
<div class = "one"> First </div>
<div id = "second"> This is a second element. </div>
<script>
$(document).ready(function () {
$(".one").css("color", "red");
$("#second").css("color", "blue");
$("div").css("font-size", "20px");
});
</script>
</body>
</html>
Example
In this example, we also use the css() method to set styles to selected HTML elements. Still, we pass the single object containing the property value pairs as a CSS() method parameter here.
We have created a single object containing multiple property-value pairs. After that, we passed it as a parameter of the css() method. In the output, users can observe that all CSS properties are applied to the div element.
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>
<body>
<h3>Using the <i> CSS() method of JQuery </i> to set style on selected HTML elements</h3>
<div class = "test"> This is test div. </div>
<script>
$(document).ready(function () {
// setting up multiple CSS properties for div element.
$(".test").css({
"color": "red",
"background-color": "yellow",
"border": "2px solid black",
"padding": "10px",
"font-size": "20px"
});
});
</script>
</body>
</html>
Use the addClass() method of JQuery to set styles on selected elements
The addClass() method of JQuery is used to add a particular class to the HTML element. IN CSS, we can add some styles to a particular class. After that, whenever we require that style on the element, we can add a class to the element using the addClass() method of JQuery.
Syntax
Users can follow the syntax below to use the addClass() method of JQuery to set styles on the selected HTML element
$("selecotr").addClass("classname");
In the above syntax, ‘classname’ is a class name to add to the HTML element.
Example
In the example below, whenever the user clicks the button, it executes the addDemo() function. We select the HTML element using its id in the function and add the ‘demo’ class to the div element.
Also, we have added some styles to the ‘demo’ class. In the output, users can observe that the demo class style is applied to the div element whenever they click the button.
<html>
<head>
<style>
.demo {
color: green;
background-color: pink;
border: 2px solid black;
padding: 10px;
font-size: 2rem;
}
</style>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>
<body>
<h2>Using the <i> addClass() method of JQuery </i> to set style on selected HTML elements.</h2>
<div id = "one">This is inside the demo div.</div>
<br>
<button onclick = "addDemo()"> Add demo class </button>
<script>
function addDemo() {
$("#one").addClass("demo");
}
</script>
</body>
</html>
Use the toggleClass() method of JQuery to set styles on selected elements
The toggleClass() method of JQuery allows users to toggle between two classes. We can add different CSS styles in both classes and toggle between two classes. This is useful when we require adding dark and light themes in the application.
Syntax
Users can follow the syntax below to use the toggleClass() method to change the CSS of the selected element.
$("selector").toggleClass("class1 class2");
In the above syntax, class1 and class2 are two class names to toggle between them.
Example
In the example below, we added different styles to the ‘one’ and ‘two’ classes. Initially, we added the ‘one’ class to the HTML element. Whenever users click the button, it toggles between the ‘one’ and ‘two’ classes. In the output, users can observe how the element's style is changing.
<html>
<head>
<style>
.one {
color: green;
background-color: pink;
border: 2px solid black;
padding: 10px;
font-size: 2rem;
}
.two {
color: red;
background-color: yellow;
border: 2px solid blue;
padding: 20px;
font-size: 3rem;
}
</style>
<script src ="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>
<body>
<h2>Using the <i> toggleClass() method of JQuery </i> to set style on selected HTML elements</h2>
<div id = "element" class = "one"> This is inside the demo div.</div> <br>
<button onclick = "toggleClass()"> toggle class </button>
<script>
function toggleClass() {
// toggle between one and two class
$("#element").toggleClass("one two");
}
</script>
</body>
</html>
Users learned to use the JQuery methods to set CSS styles on the selected HTML elements. We have used the css() method in the first approach, which is the best way to set CSS using JQuery. We have used the addClass() method in the second approach and the toggleClass() method in the third approach. Users should use any method according to the situation they handle during development.
206 Views
