Javascript to change body CSS attribute?

@ChromeLoverMay 04.2010

Hello all. I have run into a little difficulty finding some program to let me change the background attribute of by body CSS tag. Here’s some copy’s of code….

CSS:

But I can not find a jaavscript to change the URL, Does anyone know how to change this?

Thanks alot!

Aaron

to post a comment

JavaScript

9 Comments(s) _↴

@KorMay 04.2010 — #

<i>
 </i>function changeBG_URL()
 var body=document.getElementsByTagName('body')[0];
 body.style.backgroundImage='url([I][COLOR="Blue"]newURL[/COLOR][/I])';
 }

But I suggest you to use and switch rather the classes, that a certain CSS property.

@ChromeLoverauthorMay 04.2010 — #Ahhhh thank you ^{^_^{^}}

I hope this doesn't get annoying but.....now to change the attribute of a class named "NormalTable", document.NormalTable.style.borderColor="#"+PageColorValues[B]; doesn't work :/ Hmm...

@KorMay 05.2010 — #Ahhhh thank you ^{^_^{^}}

I hope this doesn't get annoying but.....now to change the attribute of a class named "NormalTable", document.NormalTable.style.borderColor="#"+PageColorValues[B]; doesn't work :/ Hmm...[/QUOTE]

No, it is not be done in that way. And it is much too intricate (because of the crossbrowser implications) to change on the fly an attribute within a class. You'd better create 2 classes and switch them using DOM 0 syntax:

<i>
 </i>[I]element[/I].className="newClass";

@ChromeLoverauthorMay 05.2010 — #No, it is not be done in that way. And it is much too intricate (because of the crossbrowser implications) to change on the fly an attribute within a class. You'd better create 2 classes and switch them using DOM 0 syntax:

<i>
 </i>[I]element[/I].className="newClass";

[/QUOTE]

That would be a little difficult considering I have to write the stuff to the page and then change the colors instead of how the script (semi) works right now.

And would the fact this project will be chrome-only change it? I am working on a school project and made a IEandFF version, then I will have a chrome only version.

@KorMay 05.2010 — # then I will have a chrome only version.[/QUOTE]
That is out of my concern. What I have told you is a full crossbrowser, logical, professional way to do that job. I don't give a dime on a browser type or another. As long as they are all on the market, you should code for all of them.

@ChromeLoverauthorMay 05.2010 — #Logical as in space wasting, time consuming, unoptimized way to do it on a specific browser, sure.

@KorMay 05.2010 — #ok. why not simply change the style of a certain CSS property? [B]style[/B] is one thing (local CSS code), [B]class[/B] is another thing (embedded or external CSS code). In fact, JavaScript will change things virtually - when the session is changes, everything is gone.

@ChromeLoverauthorMay 05.2010 — #Not 100% sure what your saying but I may be kind of confused about the names....

I want to change this CSS code:

.NormalTable{

width:100%;

border-left: 1px solid #40D0FF;

border-bottom: 1px solid #40D0FF;

border-top: 2px dashed #40D0FF;

border-right: 2px dotted #40D0FF;

background-color:#000000;

font-family:Arial;

color:#FFFFFF;

font-size:20;

font-weight:600;

}

when it loads the page it will put up another background image and change the border color before setting up the tables. So I want it to load like above, then change it the background-color: to something else depending on the options that Javascript will determine.....There isn't a standard line of code to do this? This is CSS1 stuff, is it not? ?

^{^_^{^}}

@KorMay 05.2010 — #OK. You have 3 choices, from which 2 are convenient:

1. create an alternative class and switch them:

<i>
 </i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
 &lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;Untitled Document&lt;/title&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
 &lt;meta http-equiv="Content-Style-Type" content="text/css"&gt;
 &lt;meta http-equiv="Content-Script-Type" content="text/javascript"&gt;
 &lt;style type="text/css"&gt;
 .redClass{
 background:#ccc;
 color: #ff0000;
 }
 .blueClass{
 background:#ccc;
 color: #0000ff;
 }
 &lt;/style&gt;
 &lt;script type="text/javascript"&gt;
 function switchClasses(whichClass){
 var obj=document.getElementById('myDiv');
 obj.className=whichClass;
 }
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;div id="myDiv" class="blueClass"&gt;Some text&lt;/div&gt;
 &lt;br&gt;
 &lt;div onclick="switchClasses('redClass')"&gt;change color to red&lt;/div&gt;
 &lt;div onclick="switchClasses('blueClass')"&gt;change color to blue&lt;/div&gt;
 &lt;/body&gt;
 &lt;/html&gt;

2 Switch only the CSS property (properties) within the [B]style[/B]

<i>
 </i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
 &lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;Untitled Document&lt;/title&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
 &lt;meta http-equiv="Content-Style-Type" content="text/css"&gt;
 &lt;meta http-equiv="Content-Script-Type" content="text/javascript"&gt;
 &lt;style type="text/css"&gt;
 .myClass{
 background:#ccc;
 color: #0000ff;
 }
 &lt;/style&gt;
 &lt;script type="text/javascript"&gt;
 function switchClasses(whichColor){
 var obj=document.getElementById('myDiv');
 obj.style.color=whichColor;
 }
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;div id="myDiv" class="myClass"&gt;Some text&lt;/div&gt;
 &lt;br&gt;
 &lt;div onclick="switchClasses('#ff0000')"&gt;change color to red&lt;/div&gt;
 &lt;div onclick="switchClasses('#0000ff')"&gt;change color to blue&lt;/div&gt;
 &lt;/body&gt;
 &lt;/html&gt;

Also in #JavaScript _↴

Openning a new window ON SUBMIT need help modifying a script Host Post information

Success!

Help @ChromeLover spread the word by sharing this article on Twitter...

Tweet This

Javascript to change body CSS attribute?

9 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Javascript to change body CSS attribute?

9 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

9 Comments(s) _↴

Also in #JavaScript _↴