Change CSS rule at runtime

How do I change any CSS properties during runtime?

Suppose I have:

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

Then during runtime, #mycss should be:

 #mycss {
    background:#fff;
    padding:10px;
    }

------------------------**EDIT***-------------------------------------------

Im sorry guys, I'm really new to the HTML world...

My problem or question, whatever that is, I would like to create a piece of code that would change current CSS properties by simply putting a value on the input box (e.g. color: #fff or white) and when I hit the button, it would开发者_开发知识库 change the current CSS background color from the default color (#000) to user-defined color (e.g. #fff).

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());               
});

There are multiple ways css rules can be overridden:

• Any element will take on the css rule defined nearest to the bottom of the css document you include.
• Any inline style will override the css rule defined in the css document.
• Any javascript has the ability to dynamically adjust the css properties of any given element.
• Any element can take on the property of !important, which defeats anything else defined.

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.

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".

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.

You have several choice :

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

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