5

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

Improve this question
3
  • 1
    runtime of what? when your app loads, what server side app ? Commented Aug 9, 2011 at 15:48
  • 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'? Commented Aug 9, 2011 at 15:48
  • stackoverflow.com/a/43676931/4779501 Commented Feb 15, 2024 at 13:10

7 Answers 7

Reset to default
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());               
});
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

@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.
Excellent !!. Cheers. You got it :-) Thanks Sir Rio.
2

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.
Improve this answer

Comments

2

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.

Improve this answer

Comments

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

Improve this answer

Comments

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.

Improve this answer

1 Comment

yeah, something like that sir,please forgive my being being ignorant about this thing :-)
0

You have several choice :

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

3 Comments

how do I use php to inject dynamic css in my page Sir??please help
for example : #css { background: <? echo $myDynamicCssValue; ?>; }
Sir, is it possible to add a bit of php code in stylesheet.css?
0

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

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.