CODEWITHSUNDEEP
javascriptcss
DeLe
DeLe

Reputation: 2480

How to change css dynamic by javascript

i have a style on header empty like

<style> 
.cls{

}
</style>

I want to change it dynamic by click example to 

<style> 
.cls{
    font-size: 15px;
    font-family  : Arial, Verdana;
    border: 1px solid blue;
    background-color: yellow;       
}
</style>

Here is my code http://jsfiddle.net/nyf7T/

<script>
    function changeCSS () {
        var style = 'font-size: 15px;'
        +   'font-family  : Arial, Verdana;'
        +   'border: 1px solid blue ;'
        +   'background-color: yellow;'; 
        alert(style);
    }

</script>
<style> 
.cls{

}
</style>
<div>
    <table style="margin:5px;">
        <tr>
            <td class="cls">
               abcd
            </td>
        </tr>
    </table>
</div>

  <a href="#" onclick="changeCSS();">Setstyle</a>

How to do that thank.

Upvotes: 1

Views: 387

Answers (6)

Mohan
Mohan

Reputation: 5095

Consider below piece of jQuery 

$('.cls').css({
    "font-size":"15px",
    "font-family":"Arial",
    "border":"1px solid blue",
    "background-color":"yellow"
});

cheers :-)

Upvotes: 1

kiranvj
kiranvj

Reputation: 34117

What you have asked is to change a rule of a CSS class.

You need to use CSSStyleSheet.insertRule method to do this. More info here

You might also need to look at these

document.styleSheets for getting the style sheets used in the page.

styleSheet.cssRules for getting the cssRules in a particular style sheet.

rule.selectorText property -> Check here

In your case you need to try something like this (or a more refined version)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.cls {
}
</style>
</head>

<body>
<div>
    <table style="margin:5px;">
        <tr>
            <td class="cls"> abcd </td>
        </tr>
    </table>
</div>
<a href="#" onClick="changeCSS();">Setstyle</a> 
<script>
        function changeCSS () {
           var myStyleSheet = document.styleSheets[0];

        var style = '.cls { font-size: 15px;'
            +   'font-family  : Arial, Verdana;'
            +   'border: 1px solid blue;'
            +   'background-color: yellow; }'; 

        myStyleSheet.insertRule(style, 0);
        }

    </script>
</body>
</html>

Check the working version here http://jsfiddle.net/dK65G/1/

Upvotes: 2

user2587132
user2587132

Reputation:

In your case you can use the below code

var style = '.cls{font-size: 15px;'
    +   'font-family  : Arial, Verdana;'
    +   'border: 1px solid blue;'
    +   'background-color: yellow;}'; 

document.getElementsByTagName('style')[0].innerHTML=style;

http://jsfiddle.net/nyf7T/8/

Upvotes: 1

Joao Palma
Joao Palma

Reputation: 126

You can use the jquery css function:

here is the example: http://jsfiddle.net/nyf7T/6/

<script>
$(function(){
    $('.changecss').click (function(){
       $('.cls').css({
       'font-size': '15px',
       'font-family'  : 'Arial, Verdana',
       'border': '1px solid blue',
       'background-color': 'yellow'
      });
   });
});
</script>

Upvotes: 1

q0re
q0re

Reputation: 1359

You can put the code into a class.

And set the class to the element onclick:

    function changeCSS () {
        $( "element" ).addClass( "theclass" );
    }

In CSS:

.theclass {
   font-size: 15px;
   font-family  : Arial, Verdana;
   border: 1px solid blue ;
   background-color: yellow;
}

if you want to change the clicked element do this:

function changeCSS (this) {
    $(this).addClass( "theclass" );
}

<a href="#" onclick="changeCSS(this);">Setstyle</a>

The clou is to set up the CSS before you allocate it.

Upvotes: 0

Joon
Joon

Reputation: 9884

<style> 
.cls{
    font-size: 15px;
    font-family  : Arial, Verdana;
    border: 1px solid blue;
    background-color: yellow;       
}

.newCls {
   font-size: 15px;
   font-family  : Arial, Verdana;
   border: 1px solid blue;
   background-color: yellow;
}
</style>


<a href="#" onclick="$(this).removeClass('cls').addClass('newCls');">Setstyle</a>

Upvotes: 0

Related Questions