JQuery CSS
From w3cyberlearnings
What is the css method in jQuery?
- Apply the CSS property using jQuery method.
The jQuery css method syntax
SELECTOR.css(CSS_PROPERTY_NAME, CSS_PROPERTY_VALUE);
Example 1
- Set the div content property to have the blue background color.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CSS Example 1</title>
<script
type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('div#mycontent').css('background-color','blue');
});
</script>
</head>
<body>
<div id="mycontent">Hello CSS jQuery</div>
</body>
</html>
Multiple CSS properties
- You can set multiple CSS properties.
Multiple CSS properties Syntax
SELECTOR.css(
{
Name_1:Value_1,
Name_2:Value_2,
Name_3:Value_3
});
Example -Multiple CSS Properties 1
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CSS Example 1</title>
<script
type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('div#mycontent').css({
'background-color':'blue',
'font-size':'25',
'color':'white'});
});
</script>
</head>
<body>
<div id="mycontent">Hello CSS jQuery</div>
</body>
</html>
Assign CSS property using jQuery addClass method
- Require to define the CSS stylesheet first before assign in the addClass method.
addClass method syntax
SELECTOR.addClass(CSS);
Example -addClass method
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Using addClass</title>
<script
type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<style type="text/css">
.myCss {
font-size: 18px;
border: 2px solid #06b;
}
</style>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('div#mycontent').addClass('myCss');
});
</script>
</head>
<body>
<div id="mycontent">Learning jQuery @ w3cyberlearnings dot com</div>
</body>
</html>
Remove CSS stylesheet property with removeClass method
- removeClass method uses to remove the CSS stylesheet class.
The removeClass method syntax
SELECTOR.removeClass(CSS);
Example -removeClass method
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Using addClass</title>
<script
type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<style type="text/css">
.myCss {
font-size: 18px;
border: 2px solid #06b;
}
</style>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('div#mycontent').addClass('myCss').removeClass('myCss');
});
</script>
</head>
<body>
<div id="mycontent">Learning jQuery @ w3cyberlearnings dot com</div>
</body>
</html>
Example -addClass and removeClass
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CSS Example</title>
<script
type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<style type="text/css">
.css1 {
font-size: 18px;
border: 2px solid #06b;
}
.css2 {
color:red;
background-color:green;
}
</style>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('#mybtn_add').click(function(){
$('div#mycontent').addClass('css1');
$('div#mycontent').removeClass('css2');
});
$('#mybtn_remove').click(function(){
$('div#mycontent').addClass('css2');
$('div#mycontent').removeClass('css1');
});
});
</script>
</head>
<body>
<button id="mybtn_add">Add</button>
<button id="mybtn_remove">Remove</button>
<div id="mycontent">Learning jQuery @ w3cyberlearnings dot com</div>
</body>
</html>
Related Links
Jquery and HTML Elements
