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.
6 Answers 6
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/
1 Comment
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>
Comments
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;
Comments
Consider below piece of jQuery
$('.cls').css({
"font-size":"15px",
"font-family":"Arial",
"border":"1px solid blue",
"background-color":"yellow"
});
cheers :-)
Comments
<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>
Comments
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.
addClass()to add the style to your element.