We can change the text format, style,font size by adding a class created as per the requirement to the div or any html element dynamically using the addClass method of jquery.
For Example: let us change the content inside the div that contains two div and a
tag.
<!--doctype html-->
<html>
<head>
<title>Example addClass Jquery</title>
<style type='text/css'>
.change {
background-color: #fffccc;
border: 3px solid #777;
font-style: bold;
font-size:32px;
width:500px;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<!--div content with the normal text -->
<div class="xyz">
<div >Today is a sunny day</div>
<div >Hello world .. </div>
<p>The content inside the element will also change</p>
</div>
<!--div that will contain the content with changes after adding the new class -->
<div class="lmn">
<div >Today is a sunny day</div>
<div >Hello world .. </div>
<p>The content inside the element will also change</p>
</div>
<script>
$(document).ready(function() {
$('div.lmn').addClass('change'); <!--Here we use the addClass() method -->
});
</script>
</body>
</html>
0 Comment(s)