Thursday, April 12, 2012

How to create CSS Class Dinamically using JQuery.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>
How to create CSS Class Dinamically using JQuery. </title>
    <script src="jquery-1.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
   
         $('p').one('click', function () {
                $(this).find('span').remove();
                $('style').length > 0 ? '' : $('head').append('<style type="text/css"></style>');
                $('style').append('p { height: 100px; width: 100px; color: red; }');
            });


       
     $('b').one('click', function () {
                $(this).find('span').remove();
                $('style').length > 0 ? '' : $('head').append('<style type="text/css"></style>');
                $('style').append('b { color: green; }');
            });
        });
    </script>
</head>
<body>
    <p>
        How to create CSS Class Dinamically using JQuery.<span>Click Me.</span>
    </p>
    <b>Thulasi Ram.S <span>Me Too..</span> </b>
</body>
</html>