🚦$("selector").css ("style")
What is selector?
jQuery All HTML elements based on their id, classes, types (text, radio etc.), attributes (id, title,
src etc), tag name (div, p, form, table, tr, th, td etc.) etc are jQuery selectors.
$("selector") means to access one specified element..
What is css()?
The css() method sets or returns one or more style properties for the selected elements.
css( "style") means to set a style for a specified element.
"$("selector").css ("style")" accesses a specified element, and sets a css style for it.
Set CSS by ID
"$("#id").css( )" accesses a tag by its id, and sets a css style.
If we want to access any element by its "id", then we have to use "#" to select that
element. css( ) method can set or change any property.
jqscript2.1.html
<html>
<head>
<title>JQuery Set CSS Style</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/JavaScript">
function changeColor() {
$("#divMsg").css("background-color", "red");
}
</script>
</head>
<body>
<div id="divMsg" onclick="changeColor( )" style="cursor: pointer; width: 300px;
Height:20px; background-color: #cccccc;">
Click here to change background color.
</div>
</body>
</html>
Save file with named
jqscript2.1.html and run it by any browser, you will see the
result:
Output:
Explanation:
🚦
"$ ("#divMsg").css ("background-color", "red")" accesses a tag whose id is
"divMsg", and sets its background color as
"red".
🚦
"<div id="divMsg" onclick="changeColor( ) >" executes the function
"changeColor( )" when clicking a tag whose id is
"divMsg".
🚦 In above example, you can see I am changing
"div" background color by accessing its id
"#divMsg".
Set CSS by Tag
"$("tag").css( )" accesses a tag by its name, and sets a css style.
If we want to access any element by its "tag" name, then we have to use "tag" name to
select that element, css( ) method can set or change any property.
jqscript2.2.html
<html>
<head>
<title>JQuery Set CSS Style by Tag</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/JavaScript">
function changeColor() {
$("div").css("background-color", "red");
}
</script>
</head>
<body>
<div onclick="changeColor( )" style="cursor: pointer; width: 300px;
Height:20px; background-color: #cccccc;">
Click here to change background color.
</div>
</body>
</html>
Save file with named
jqscript2.2.html and run it by any browser, you will see the
result:
Output:
Explanation:
🚦
"$ ("div").css ("background-color", "red")" accesses a tag whose tag name is
"divTest", and sets its
background color as
"red".
🚦
"<div onclick="changeColor()">" executes the function
"changeColor( )" when clicking a tag whose tag name is
"div".
🚦 In above example, you can see I am changing
"div" background color by using tag "div".
Set CSS by Class
"$(".class"). css( )" accesses an element by its class name, and sets a css style.
If we want to access any element by "class" name then we have to use "class name" to
select that element, css( ) method can set or change any property.
jqscript2.3.html
<html>
<head>
<title>JQuery Set CSS Style by Class</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/JavaScript">
function changeColor() {
$(".divMsg").css("background-color", "red");
}
</script>
</head>
<body>
<div class="divMsg" onclick="changeColor( )" style="cursor: pointer; width: 300px;
Height:20px; background-color: #cccccc;">
Click here to change background color.
</div>
</body>
</html>
Save file with named
jqscript2.3.html and run it by any browser, you will see the
result:
Output:
Explanation:
🚦
"$(".divMsg").css ("background-color", "red")" accesses a tag whose class name is
"divMsg", and sets its
background color as
"red".
🚦
<div class="divMsg" onclick="changeColor()" > executes the function
"changeColor( )" when clicking a tag whose class name is
"divMsg" .
🚦 In above example, you can see I am changing "div"
background color by using class
".divMsg".
Set CSS by Specified Tag
"$("'p:nth-child(n)"). css( )" accesses the "n" tag, and sets a css style.
"$ ("'p:nth-child(1)"). css( )" accesses the first tag, and sets a css style.
"$ ("'p:nth-child(4)"). css( )" accesses the fourth tag, and sets a css style.
jqscript2.4.html
<html>
<head>
<title>JQuery Set CSS by Specified Tag</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/JavaScript">
function setCSS() {
$('p:nth-child(1)').css("font-style", "italic");
$('p:nth-child(4)').css("font-style", "italic");
}
</script>
</head>
<body>
<h1>Selecting the first and last tag</h1>
<div>
<p>jQuery Hallo world! 1 time</p>
<p>jQuery Hallo world! 2 time</p>
<p>jQuery Hallo world! 3 time</p>
<p>jQuery Hallo world! 4 time</p>
</div>
<input type="button" value="Click Me" onclick="setCSS()" />
</body>
</html>
Save file with named
jqscript2.4.html and run it by any browser, you will see the
result:
Output:
Explanation:
🚦
"onclick="setCSS()"" executes the function when clicking the button.
🚦
"$ ('p:nth-child(1)'). css( )" accesses the first tag, and sets a css style.
🚦
"$ ('p:nth-child(4)'). css( )" accesses the fourth tag, and sets a css style.
🚦
"onclick="setCSS()"" runs the
setCSS() when clicking the button.
Set CSS by Index
$("div").eq(n).css( ) accesses an element whose index number is "n", and sets a css style.
The .eq() selector is used to select an element with a specific index number.
Note: The index numbers starts from 0, so the first element will have the index number 0.
jqscript2.5.html
<html>
<head>
<title>JQuery Set CSS by Index</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/JavaScript">
function changeColor() {
$("div").eq(2).css("background-color", "blue");
}
</script>
</head>
<body>
<div style="float: left; background-color: aqua; width: 150px; height: 120px;"> </div>
<div style="float: left; background-color: maroon; width: 150px; height: 120px;"> </div>
<div style="float: left; background-color: green; width: 150px; height: 120px;"> </div>
<br><br><br><br><br><br><br>
<input type="button" value="Click Me" onclick="changeColor()" />
</body>
</html>
Save file with named
jqscript2.5.html and run it by any browser, you will see the
result:
Output:
Explanation:
🚦
"$("div").eq(2).css("background-color", "black")" accesses the 3th tag "div", and sets its background color as black.
🚦
"<input type="button" value="Click Me" onclick="changeColor( )" />" runs "changeColor( )" when clicking the button.
🚦 The color of 3st location div has been changed from green to black.
Set CSS by First Tag
$("tag:first"). css( ) accesses the first element, and sets a css style.
":first" selector is used to select the first element from matched elements.
jqscript2.6.html
<html>
<head>
<title>JQuery Set CSS by First Tag</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/JavaScript">
function changeColor() {
$("div:first").css("background-color", "blue");
}
</script>
</head>
<body>
<div style="float: left; background-color: aqua; width: 150px; height: 120px;"> </div>
<div style="float: left; background-color: maroon; width: 150px; height: 120px;"> </div>
<div style="float: left; background-color: green; width: 150px; height: 120px;"> </div>
<br><br><br><br><br><br><br>
<input type="button" value="Click Me" onclick="changeColor()" />
</body>
</html>
Save file with named
jqscript2.6.html and run it by any browser, you will see the
result:
Output:
Explanation:
🚦
"$("div:first").css("background-color", "blue")" accesses the first tag
"div", and sets its background color as blue.
🚦
"<input type="button" value="Click Me" onclick="changeColor( )" />" runs "changeColor( )" when clicking the button.
🚦The color of 1st location div has been changed from aqua to blue.
Set CSS by Last Tag
$("tag:last").css( ) accesses the last element, and sets a css style.
":last" selector is used to select the last tag from matched elements.
jqscript2.7.html
<html>
<head>
<title>JQuery Set CSS by First Tag</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/JavaScript">
function changeColor() {
$("div:first").css("background-color", "blue");
}
</script>
</head>
<body>
<div style="float: left; background-color: aqua; width: 150px; height: 120px;"> </div>
<div style="float: left; background-color: maroon; width: 150px; height: 120px;"> </div>
<div style="float: left; background-color: green; width: 150px; height: 120px;"> </div>
<br><br><br><br><br><br><br>
<input type="button" value="Click Me" onclick="changeColor()" />
</body>
</html>
Save file with named
jqscript2.7.html and run it by any browser, you will see the
result:
Output:
Explanation:
🚦
"$("div:last").css("background-color", "black")" accesses the last tag "div", and sets its background color as black.
🚦
"<input type="button" value="Click Me" onclick="changeColor( )" />" runs "changeColor( )" when clicking the button.
🚦 The color of last location div has been changed from green to black.
Set CSS by Embed Tag
$("body") selector will get the content inside the "body" tag. $("body div") will get the all div elements inside the "body" tag.
$("body div tag"). css( ) accesses a "tag" under the "div" inside the "body", and sets a css style.
jqscript2.8.html
<html>
<head>
<title>JQuery Set CSS by Embed Tag</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/JavaScript">
function changeColor() {
$("body div p").css("background-color", "blue");
}
</script>
</head>
<body>
<div>
<p align="center" style="float: left; background-color: aqua; width: 150px; height:
120px;"></p>
<p align="center" style="float: left; background-color: maroon; width: 150px; height:
120px;"></p>
<p style="float: left; background-color: green; width: 150px; height: 120px;"> </p>
</div>
<br><br><br><br><br><br>
<div>
<br><br><br>
<input name="button" type="button" onClick="changeColor()" value="Click Me" />
</div>
</body>
</html>
Save file with named
jqscript2.8.html and run it by any browser, you will see the
result:
Output:
Explanation:
🚦
"$("body div p").css("background-color", "blue")" accesses all "p" taps inside the "div" tag which locates inside the "body" tag, and sets the background color as blue.
🚦
"<input type="button" value="Click Me" onclick="changeColor( )" />" runs "changeColor( )" when clicking the button.
No comments:
Post a Comment
Please do not enter any spam link in the comment box.