1)Open your editor such as visual studio/notepad.
2)Add html, head, script and body tag.
3) Add CDN links for jquery .js files in head tag:-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>4) Add one paragraph element and three buttons one for adding css class, one for removing css class and one for toggling css class.
<p>This is sample text.</p><br/>
<button Id="btnAddClass">Add Css Class</button>
<button Id="btnRemoveClass">Remove Css Class</button>
<button Id="btnToggleClass">Toggle Css Class</button>
Full Code:-
<html>
<head>
<style type="text/css">
.SampleText
{
color:red;
font-size:50px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#btnAddClass').click(function(){
$('p').addClass('SampleText');
});
$('#btnRemoveClass').click(function(){
$('p').removeClass('SampleText');
});
$('#btnToggleClass').click(function(){
$('p').toggleClass('SampleText');
});
});
</script>
</head>
<body>
<p>This is sample text.</p><br/>
<button Id="btnAddClass">Add Css Class</button>
<button Id="btnRemoveClass">Remove Css Class</button>
<button Id="btnToggleClass">Toggle Css Class</button>
</body>
</html>
No comments:
Post a Comment