jQuery provides a variety of methods to manipulate the CSS properties of elements. This tutorial covers 20 different CSS manipulation techniques with detailed explanations and examples.
You can set CSS properties using the .css() method.
<!DOCTYPE html>
<html>
<head>
<title>jQuery .css() Method - Set Single Property</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#setButton").click(function(){
$("p").css("color", "blue");
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button id="setButton">Set Color</button>
</body>
</html>
This example shows how to set a single CSS property using .css().
<!DOCTYPE html>
<html>
<head>
<title>jQuery .css() Method - Set Multiple Properties</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#setButton").click(function(){
$("p").css({
"color": "blue",
"font-size": "20px"
});
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button id="setButton">Set Styles</button>
</body>
</html>
This example demonstrates how to set multiple CSS properties using .css().
You can get the current value of a CSS property using the .css() method.
<!DOCTYPE html>
<html>
<head>
<title>jQuery .css() Method - Get Single Property</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#getButton").click(function(){
var color = $("p").css("color");
alert("Color: " + color);
});
});
</script>
</head>
<body>
<p style="color: blue;">This is a paragraph.</p>
<button id="getButton">Get Color</button>
</body>
</html>
This example shows how to get the value of a single CSS property using .css().
<!DOCTYPE html>
<html>
<head>
<title>jQuery .css() Method - Get Multiple Properties</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#getButton").click(function(){
var styles = {
color: $("p").css("color"),
fontSize: $("p").css("font-size")
};
alert("Color: " + styles.color + ", Font Size: " + styles.fontSize);
});
});
</script>
</head>
<body>
<p style="color: blue; font-size: 20px;">This is a paragraph.</p>
<button id="getButton">Get Styles</button>
</body>
</html>
This example demonstrates how to get the values of multiple CSS properties using .css().
You can add one or more classes to selected elements using the .addClass() method.
<!DOCTYPE html>
<html>
<head>
<title>jQuery .addClass() Method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#addClassButton").click(function(){
$("p").addClass("highlight");
});
});
</script>
<style>
.highlight {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
<button id="addClassButton">Add Class</button>
</body>
</html>
This example shows how to add a class to an element using .addClass().
You can remove one or more classes from selected elements using the .removeClass() method.
<!DOCTYPE html>
<html>
<head>
<title>jQuery .removeClass() Method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#removeClassButton").click(function(){
$("p").removeClass("highlight");
});
});
</script>
<style>
.highlight {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<p class="highlight">This is a paragraph.</p>
<button id="removeClassButton">Remove Class</button>
</body>
</html>
This example demonstrates how to remove a class from an element using .removeClass().
You can toggle the presence of one or more classes using the .toggleClass() method.
<!DOCTYPE html>
<html>
<head>
<title>jQuery .toggleClass() Method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#toggleClassButton").click(function(){
$("p").toggleClass("highlight");
});
});
</script>
<style>
.highlight {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
<button id="toggleClassButton">Toggle Class</button>
</body>
</html>
This example shows how to toggle a class on an element using .toggleClass().
You can check if any of the selected elements have a specific class using the .hasClass() method.
<!DOCTYPE html>
<html>
<head>
<title>jQuery .hasClass() Method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#checkClassButton").click(function(){
if ($("p").hasClass("highlight")) {
alert("The paragraph has the 'highlight' class.");
} else {
alert("The paragraph does not have the 'highlight' class.");
}
});
});
</script>
<style>
.highlight {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<p class="highlight">This is a paragraph.</p>
<button id="checkClassButton">Check Class</button>
</body>
</html>
This example demonstrates how to check for a class on an element using .hasClass().
jQuery provides methods to get and set the width and height of elements, such as .width(), .height(), .innerWidth(), .innerHeight(), .outerWidth(), and .outerHeight().
<!DOCTYPE html>
<html>
<head>
<title>jQuery .width() Method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#setWidthButton").click(function(){
$("div").width(300);
});
});
</script>
<style>
div {
background-color: yellow;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div></div>
<button id="setWidthButton">Set Width</button>
</body>
</html>
This example shows how to set the width of an element using .width().
<!DOCTYPE html>
<html>
<head>
<title>jQuery .height() Method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#setHeightButton").click(function(){
$("div").height(300);
});
});
</script>
<style>
div {
background-color: yellow;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div></div>
<button id="setHeightButton">Set Height</button>
</body>
</html>
This example demonstrates how to set the height of an element using .height().
<!DOCTYPE html>
<html>
<head>
<title>jQuery .innerWidth() Method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#getInnerWidthButton").click(function(){
var innerWidth = $("div").innerWidth();
alert("Inner Width: " + innerWidth);
});
});
</script>
<style>
div {
background-color: yellow;
padding: 10px;
width: 100px;
}
</style>
</head>
<body>
<div>This is a div.</div>
<button id="getInnerWidthButton">Get Inner Width</button>
</body>
</html>
This example illustrates how to get the inner width of an element using .innerWidth().
<!DOCTYPE html>
<html>
<head>
<title>jQuery .innerHeight() Method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#getInnerHeightButton").click(function(){
var innerHeight = $("div").innerHeight();
alert("Inner Height: " + innerHeight);
});
});
</script>
<style>
div {
background-color: yellow;
padding: 10px;
height: 100px;
}
</style>
</head>
<body>
<div>This is a div.</div>
<button id="getInnerHeightButton">Get Inner Height</button>
</body>
</html>
This example shows how to get the inner height of an element using .innerHeight().
<!DOCTYPE html>
<html>
<head>
<title>jQuery .outerWidth() Method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#getOuterWidthButton").click(function(){
var outerWidth = $("div").outerWidth();
alert("Outer Width: " + outerWidth);
});
});
</script>
<style>
div {
background-color: yellow;
border: 5px solid black;
width: 100px;
}
</style>
</head>
<body>
<div>This is a div.</div>
<button id="getOuterWidthButton">Get Outer Width</button>
</body>
</html>
This example demonstrates how to get the outer width of an element using .outerWidth().
<!DOCTYPE html>
<html>
<head>
<title>jQuery .outerHeight() Method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#getOuterHeightButton").click(function(){
var outerHeight = $("div").outerHeight();
alert("Outer Height: " + outerHeight);
});
});
</script>
<style>
div {
background-color: yellow;
border: 5px solid black;
height: 100px;
}
</style>
</head>
<body>
<div>This is a div.</div>
<button id="getOuterHeightButton">Get Outer Height</button>
</body>
</html>
This example illustrates how to get the outer height of an element using .outerHeight().
jQuery provides methods to get the current coordinates of elements, such as .position() and .offset().
<!DOCTYPE html>
<html>
<head>
<title>jQuery .position() Method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#getPositionButton").click(function(){
var position = $("div").position();
alert("Position - Top: " + position.top + ", Left: " + position.left);
});
});
</script>
<style>
div {
background-color: yellow;
position: relative;
top: 50px;
left: 50px;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div>This is a div.</div>
<button id="getPositionButton">Get Position</button>
</body>
</html>
This example shows how to get the position of an element relative to its offset parent using .position().
<!DOCTYPE html>
<html>
<head>
<title>jQuery .offset() Method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#getOffsetButton").click(function(){
var offset = $("div").offset();
alert("Offset - Top: " + offset.top + ", Left: " + offset.left);
});
});
</script>
<style>
div {
background-color: yellow;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div>This is a div.</div>
<button id="getOffsetButton">Get Offset</button>
</body>
</html>
This example demonstrates how to get the offset of an element relative to the document using .offset().
You can change the visibility of elements using methods such as .show(), .hide(), and .toggle().
<!DOCTYPE html>
<html>
<head>
<title>jQuery .show() Method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#showButton").click(function(){
$("div").show();
});
});
</script>
<style>
div {
display: none;
background-color: yellow;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div>This is a div.</div>
<button id="showButton">Show</button>
</body>
</html>
This example shows how to show a hidden element using .show().
<!DOCTYPE html>
<html>
<head>
<title>jQuery .hide() Method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#hideButton").click(function(){
$("div").hide();
});
});
</script>
<style>
div {
background-color: yellow;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div>This is a div.</div>
<button id="hideButton">Hide</button>
</body>
</html>
This example demonstrates how to hide an element using .hide().
<!DOCTYPE html>
<html>
<head>
<title>jQuery .toggle() Method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#toggleButton").click(function(){
$("div").toggle();
});
});
</script>
<style>
div {
background-color: yellow;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div>This is a div.</div>
<button id="toggleButton">Toggle</button>
</body>
</html>
This example illustrates how to toggle the visibility of an element using .toggle().
jQuery provides methods to create fade animations, such as .fadeIn(), .fadeOut(), and .fadeToggle().
<!DOCTYPE html>
<html>
<head>
<title>jQuery .fadeIn() Method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#fadeInButton").click(function(){
$("div").fadeIn();
});
});
</script>
<style>
div {
display: none;
background-color: yellow;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div>This is a div.</div>
<button id="fadeInButton">Fade In</button>
</body>
</html>
This example shows how to fade in an element using .fadeIn().
<!DOCTYPE html>
<html>
<head>
<title>jQuery .fadeOut() Method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#fadeOutButton").click(function(){
$("div").fadeOut();
});
});
</script>
<style>
div {
background-color: yellow;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div>This is a div.</div>
<button id="fadeOutButton">Fade Out</button>
</body>
</html>
This example demonstrates how to fade out an element using .fadeOut().
<!DOCTYPE html>
<html>
<head>
<title>jQuery .fadeToggle() Method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#fadeToggleButton").click(function(){
$("div").fadeToggle();
});
});
</script>
<style>
div {
background-color: yellow;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div>This is a div.</div>
<button id="fadeToggleButton">Fade Toggle</button>
</body>
</html>
This example illustrates how to toggle the fade effect on an element using .fadeToggle().
jQuery provides methods to create slide animations, such as .slideDown(), .slideUp(), and .slideToggle().
<!DOCTYPE html>
<html>
<head>
<title>jQuery .slideDown() Method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#slideDownButton").click(function(){
$("div").slideDown();
});
});
</script>
<style>
div {
display: none;
background-color: yellow;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div>This is a div.</div>
<button id="slideDownButton">Slide Down</button>
</body>
</html>
This example shows how to slide down an element using .slideDown().
<!DOCTYPE html>
<html>
<head>
<title>jQuery .slideUp() Method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#slideUpButton").click(function(){
$("div").slideUp();
});
});
</script>
<style>
div {
background-color: yellow;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div>This is a div.</div>
<button id="slideUpButton">Slide Up</button>
</body>
</html>
This example demonstrates how to slide up an element using .slideUp().
<!DOCTYPE html>
<html>
<head>
<title>jQuery .slideToggle() Method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#slideToggleButton").click(function(){
$("div").slideToggle();
});
});
</script>
<style>
div {
background-color: yellow;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div>This is a div.</div>
<button id="slideToggleButton">Slide Toggle</button>
</body>
</html>
This example illustrates how to toggle the slide effect on an element using .slideToggle().
The .animate() method allows you to create custom animations by changing the CSS properties of elements.
<!DOCTYPE html>
<html>
<head>
<title>jQuery .animate() Method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#animateButton").click(function(){
$("div").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
});
});
});
</script>
<style>
div {
position: relative;
background-color: yellow;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div></div>
<button id="animateButton">Animate</button>
</body>
</html>
This example shows how to animate the properties of an element using .animate().
The .stop() method is used to stop animations that are currently running.
<!DOCTYPE html>
<html>
<head>
<title>jQuery .stop() Method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#startButton").click(function(){
$("div").animate({left: '250px'}, 5000);
});
$("#stopButton").click(function(){
$("div").stop();
});
});
</script>
<style>
div {
position: relative;
background-color: yellow;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div></div>
<button id="startButton">Start Animation</button>
<button id="stopButton">Stop Animation</button>
</body>
</html>
This example demonstrates how to stop an animation using the .stop() method.
The .delay() method is used to delay the execution of subsequent items in the queue.
<!DOCTYPE html>
<html>
<head>
<title>jQuery .delay() Method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#delayButton").click(function(){
$("div").fadeOut(1000).delay(2000).fadeIn(1000);
});
});
</script>
<style>
div {
background-color: yellow;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div></div>
<button id="delayButton">Delay Animation</button>
</body>
</html>
This example shows how to delay an animation using .delay().
jQuery allows you to chain multiple methods together for cleaner and more efficient code.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Method Chaining</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#chainButton").click(function(){
$("p").css("color", "blue").slideUp(2000).slideDown(2000);
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button id="chainButton">Chain Methods</button>
</body>
</html>
This example demonstrates how to chain multiple methods together.
You can add inline styles to elements using the .css() method.
<!DOCTYPE html>
<html>
<head>
<title>jQuery .css() Method - Inline Styles</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#inlineStylesButton").click(function(){
$("p").css("background-color", "yellow");
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button id="inlineStylesButton">Add Inline Styles</button>
</body>
</html>
This example shows how to add inline styles to an element using .css().
You can reset styles to their default values using the .removeAttr() method.
<!DOCTYPE html>
<html>
<head>
<title>jQuery .removeAttr() Method - Reset Styles</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#resetStylesButton").click(function(){
$("p").removeAttr("style");
});
});
</script>
</head>
<body>
<p style="color: blue; font-size: 20px;">This is a paragraph.</p>
<button id="resetStylesButton">Reset Styles</button>
</body>
</html>
This example demonstrates how to reset styles using the .removeAttr() method.
You can change the cursor style of elements using the .css() method.
<!DOCTYPE html>
<html>
<head>
<title>jQuery .css() Method - Cursor Style</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#cursorStyleButton").click(function(){
$("p").css("cursor", "pointer");
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button id="cursorStyleButton">Change Cursor Style</button>
</body>
</html>
This example shows how to change the cursor style using .css().
You can manage the overflow behavior of elements using the .css() method.
<!DOCTYPE html>
<html>
<head>
<title>jQuery .css() Method - Overflow</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#overflowButton").click(function(){
$("div").css("overflow", "scroll");
});
});
</script>
<style>
div {
background-color: yellow;
height: 100px;
width: 100px;
overflow: hidden;
}
</style>
</head>
<body>
<div>This is a div with a lot of content inside. This is a div with a lot of content inside. This is a div with a lot of content inside.</div>
<button id="overflowButton">Set Overflow</button>
</body>
</html>
This example demonstrates how to manage overflow using .css().
You can apply gradients to elements using the .css() method.
<!DOCTYPE html>
<html>
<head>
<title>jQuery .css() Method - Gradients</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#gradientsButton").click(function(){
$("div").css("background", "linear-gradient(to right, red, yellow)");
});
});
</script>
<style>
div {
background-color: yellow;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div>This is a div.</div>
<button id="gradientsButton">Apply Gradient</button>
</body>
</html>
This example shows how to apply gradients using .css().