In this post we are learn about to
selecting Elements by Style in jQuery.
We can also select page elements based on
CSS style. For example, if we have a number
of paragraphs and the third paragraph has been assigned the
style class third, we can
select that paragraph like this:
$('p.third').
If the paragraph elements are contained
inside a <div>
element, we can also indicate
that (although it is not necessary), like this:
$('div p.third').
In this example, we will let the user toggle the background of the third paragraph in the page
by clicking a button.
jqscript3.1.html
<html>
<head>
<title>
Select a paragraph based on
style
</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function stripe() {
$('p.third')
.toggleClass("striped");
}
</script>
<style>
p.third {
font-weight: normal;
}
p.striped {
background-color: cyan;
width: 300px;
}
</style>
</head>
<body>
<h1>
Select a paragraph based on
style
</h1>
<div>
<p>This is paragraph 1.</p>
<p>This is paragraph 2.</p>
<p class="third">
This is paragraph 3.
</p>
<p>This is paragraph 4.</p>
</div>
<form>
<input type="button"
value="Stripe"
onclick="stripe()"
</input>
</form>
</body>
</html>
Output:
No comments:
Post a Comment
Please do not enter any spam link in the comment box.