This simple html page creates one input field, one button and one paragraph.
<!DOCTYPE html>
<html>
<head><title>Applying CSS in jquery</title><head>
<body>
<input type="text"/><br/>
<input type="button" value="Click Me">
<p>This is a test paragraph for applying css with jquery</p>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="apply_css.js"></script>
</body>
</html>
We want to change the background color of input field when focusIn and to white when focusOut. Similarly, we want to change the paragraph text font and background color of paragraph after click on button. The simple jquery for this is show below
"apply_css.js"
$(':text, submit').focusin(function(){
$(this).css('background-color','yellow');
});
$(':text').blur(function(){
$(this).css('background-color','#fff');
});
$(':button').click(function(){
$('p').css('background-color','#000').css('color','#fff').css('font-size','30px');
});
<!DOCTYPE html>
<html>
<head><title>Applying CSS in jquery</title><head>
<body>
<input type="text"/><br/>
<input type="button" value="Click Me">
<p>This is a test paragraph for applying css with jquery</p>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="apply_css.js"></script>
</body>
</html>
We want to change the background color of input field when focusIn and to white when focusOut. Similarly, we want to change the paragraph text font and background color of paragraph after click on button. The simple jquery for this is show below
"apply_css.js"
$(':text, submit').focusin(function(){
$(this).css('background-color','yellow');
});
$(':text').blur(function(){
$(this).css('background-color','#fff');
});
$(':button').click(function(){
$('p').css('background-color','#000').css('color','#fff').css('font-size','30px');
});
No comments:
Post a Comment