Change CSS rule at runtime

Question

How do I change any CSS properties during runtime?
Suppose I have:

#mycss {
   background:#000;
   padding:0;
}

Then during runtime,

Answer 1

First of all, Websites don't have a runtime. If I guess correctly, you want to manipulate the JS after it has been sent to the client and that's only possible using JavaScript.

Answer 2

Add jQuery to your page. Then:

$(function() {
    $('#mycss').css('background-color', '#FFFFFF');
    $('#mycss').css('padding', '10px');
});

Look up the documentation for the .css() method.

But yeah, no one really knows what you mean by "runtime".

Answer 3

You could change it any of the following ways:

• Adding a style declaration in the page
• Adding an inline style declaration on the element
• Using jQuery to change the style of the element

Additional Style Solution:

<style type='text/css'>
    #mycss{ background: #fff; padding: 10px; }
</style>

Inline Style Solution:

Add the following style='background: #fff; padding: 10px' to your element with id='mycss'

jQuery Solution (obviously requires you to include jQuery):

$('#mycss').css('background-color','#FFFFFF').css('padding','10px');

------------------------------------------------------------Edit-----------------------------------------------------------------

Using jQuery - I believe I achieved the functionality you were looking for in your edit. It could be accomplished in pure javascript as well, just let me know if you would like that solution, here is a demo.

Type any color and change the background (Red, #F7F6F5, Purple, #999 etc.)

//On Button Click - changes background on click...
$('#change').click(function()
{
    $('body').css('background-color',$('#color').val()); 
});


//On Textbox Change - changes background when the textbox changes...
$('#color').change(function()
{
         $('body').css('background-color',$(this).val());               
});

Answer 4

You have several choice :

• use php to inject dynamic css in your page
• modify tag style with javascript

Answer 5

You can't really change the css other than switching to a whole new stylesheet or overwriting it. Wat may be the easiest method is this: (JavaScript)

document.getElementById('idOfObject').backgroundColor = "#fff";

See also this page for a similar problem: http://www.kirupa.com/html5/changing_css_using_javascript.htm

Answer 6

First of all, CSS should be inserted as "titled" link:

<link rel="stylesheet" href="css/fillCtrl.css" title="fillCtrl">

If I will to change in this CSS next selector (no matter what [ctr-panel~="button"] means):

[ctr-panel~="button"] {
    width: 25px;
    min-width:  25px;
}

To do so in JS write:

    for (var i = 0; i < document.styleSheets.length; i++) {
        var sheet = document.styleSheets[i];
        if (sheet.title == 'fillCtrl'){
            for (var j=0, n=sheet.cssRules.length; j < n; j++){
                var rule = sheet.cssRules[j]
                if (rule.selectorText == '[ctr-panel~="button"]'){
                    rule.style.cssText="width: 12px; min-width: 15px;"
                }
            }
        }
    }

Obviously, it might be another logics to find appropriate rule.style.