jQuery css() Method
jQuery has one important method for CSS manipulation: css()The css() method has three different syntaxes, to perform different tasks.
- css(name) - Return CSS property value
- css(name,value) - Set CSS property and value
- css({properties}) - Set multiple CSS properties and values
1. Return CSS Property
Use css(name) to return the specified CSS property value of the FIRST matched element:syntax:
$(this).css("background-color");
Example:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").click(function(){
$("p").html($(this).css("background-color"));
});
});
</script>
</head>
<body>
<div style="width:100px;height:100px;background:#ff0000"></div>
<p>Click in the red box to return the background color.</p>
</body>
</html>
syntax:
Example:
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").click(function(){
$("p").html($(this).css("background-color"));
});
});
</script>
</head>
<body>
<div style="width:100px;height:100px;background:#ff0000"></div>
<p>Click in the red box to return the background color.</p>
</body>
</html>
2. Set CSS Property and Value
Use css(name,value) to set the specified CSS property for ALL matched elements:syntax:
$("p").css("background-color","yellow");
<html>
<head>
<script type="text/javascript"
src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").css("background-color","blue");
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
3.Set Multiple CSS Property/Value Pairs
Use css({properties}) to set one or more CSS property/value pairs for the selected elements:syntax:
$("p").css({"background-color":"yellow","font-size":"200%"});
Example:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").css({"background-color":"blue","font-size":"200%"});
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
Size Manipulation Examples:
jQuery has two important methods for size manipulation.
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").css({"background-color":"blue","font-size":"200%"});
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
Size Manipulation Examples:
jQuery has two important methods for size manipulation.- height()
- width()
1.
The height() method sets the height of all matching elements:
Syntax:
$("#div1").height("200px");
Example:
<html>
<head>
<script type="text/javascript"
src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("#div1").height("200px");
});
});
</script>
</head>
<body>
<div id="div1" style="background:yellow;height:100px;width:100px">HELLO</div>
<div
style="background:red;height:100px;width:100px">W3SCHOOLS</div>
<button>Click me</button>
</body>
</html>
1.
The width() method sets the widthof all matching elements:
Syntax:
$("#div2").width("300px");
<html>
<head>
<script type="text/javascript"
src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("#div2").width("300px");
});
});
</script>
</head>
<body>
<div
style="background:yellow;height:100px;width:100px">HELLO</div>
<div id="div2"
style="background:red;height:100px;width:100px">W3SCHOOLS</div>
<button>Click me</button>
</body>
</html>
jQuery CSS Methods
| CSS Properties | Description |
|---|---|
| 1. $(selector).css(name) | Get the style property value of the first matched element |
| 2.$(selector).css(name,value) | Set the value of one style property for matched elements |
| 3. $(selector).css({properties}) | Set multiple style properties for matched elements |
| 4. $(selector).height(value) | Set the height of matched elements |
| 5. $(selector).width(value) | Set the width of matched elements |
No comments:
Post a Comment