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, #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).

When is the 'runtime'? Do you want to do it when someone clicks a button, or, for some reason, have it changed immediately during 'runtime'? — Dominic K, Aug 09 '11 at 15:48
runtime of what? when your app loads, what server side app ? — JonH, Aug 09 '11 at 15:48

Rion Williams · Accepted Answer · 2011-08-09T20:41:42.690

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

@php_newbie - I added an area at the the bottom of my answer, as well as an example. Let me know if that fits your need. — Rion Williams, Aug 09 '11 at 20:44

score 2 · Answer 2 · answered Jul 20 '17 at 09:38

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.

score 2 · Answer 3 · answered Aug 09 '11 at 15:51

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.

score 1 · Answer 4 · answered Aug 09 '11 at 15:49

1

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

answered Aug 09 '11 at 15:49

tybro0103

48,327
33
144
170

score 0 · Answer 5 · answered Aug 09 '11 at 15:49

0

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.

answered Aug 09 '11 at 15:49

F.P

17,421
34
123
189

yeah, something like that sir,please forgive my being being ignorant about this thing :-) – php_newbie Aug 09 '11 at 16:07

score 0 · Answer 6 · answered Aug 09 '11 at 15:49

0

You have several choice :

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

answered Aug 09 '11 at 15:49

Jerome Cance

8,103
12
53
106

how do I use php to inject dynamic css in my page Sir??please help – php_newbie Aug 09 '11 at 16:05
for example : #css { background: echo $myDynamicCssValue; ?>; } – Jerome Cance Aug 09 '11 at 16:07
Sir, is it possible to add a bit of php code in stylesheet.css? – php_newbie Aug 09 '11 at 16:10

score 0 · Answer 7 · answered Aug 09 '11 at 15:50

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

Change CSS rule at runtime

7 Answers7

Linked