alter external style sheet with jquery or javascript

rambo85

Hi I would like to change the background-color rule of an external stylesheet,just wondering how I would go about this,probably using .css method of jquery but anyway will do. any help

Thanks.....

Malice

Do you want to change the actual physical file itself or just the style that is applied to a particular page element?

Giblet

You can use either
object.style.backgroundColor = '#000';

or

document.styleSheets[0].addRule('.selector', 'background-color:red;');

rambo85

This is some of the external sheet,I have a function that I want to call to change the background color of body

function changeStyle()
{

document.styleSheets[0].addRule('body','background-color:red;');
}
//end changeStyle function

/*
Design by Metamorphosis Design
http://www.metamorphozis.com
Released for free under a Creative Commons Attribution 2.5 License
*/

*{
    margin: 0px;
    padding: 0px;
}

img, fieldset{
    padding: 0px;
    border: none;
	margin: 0px;
	line-height: 0px;
}
#grad_bg{
	position: absolute;
	height: 664px;
	background-color: #ffffff;
	width: 100%;
}
a{
    color: #ffffff;
    text-decoration: none;
}

a:hover {
    text-decoration: none;
    color: #000000;
}

body{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	/* [disabled]line-height: 17px; */
	color: #ffffff;
	background-color:red;
}

28064212

What's your reason for not just using this?:

function changeStyle()
{
  document.body.style.backgroundColor = 'red';
}

duffman85

Keep it simple! -just use CSS - the last defined style is the one the page will use. so add style information after the link tag with a <style> tag or another link tag or add style directly to the element(<div style=".....">)

add

[PHP]
<style type="text/css">
body{background-color:red;}
</style>
[/PHP]
after the<link> element for your stylesheet on your page.

alternatively you can link another stylesheet

[PHP]
<link rel="stylesheet" href="defaultStyles.css" />
<link rel="stylesheet" href="override.css" />
[/PHP]
If you define the some of same styles in the second linked stylesheet it will override the first one. i.e. the style for body is defined in the external stylesheet, putting body{background-color:red;} in the override.css will override this.

carveone

duffman85 wrote: »

Keep it simple! -just use CSS - the last defined style is the one the page will use.

That's the cascading bit.

Procasinator

What duffman85 said. If it doesn't appear to work, look into the specificity of the styles applied.

rambo85

I have to change it with javascript or jquery,its for a class asignment,
its an external style sheet and i want to change the background colour,
I tried using

document.style.background-color='red'

but it doesnt work,my lecturer said I have to change the external style sheet,I looked online for ways to do it,but had no luck

28064212

rambo85 wrote: »

I have to change it with javascript or jquery,its for a class asignment,
its an external style sheet and i want to change the background colour,
I tried using

document.style.background-color='red'

but it doesnt work,my lecturer said I have to change the external style sheet,I looked online for ways to do it,but had no luck

Changing an external stylesheet with Javascript doesn't make a whole lot of sense. Can you post the exact text of the question?

Procasinator

rambo85 wrote: »

I have to change it with javascript or jquery,its for a class asignment,
its an external style sheet and i want to change the background colour,
I tried using

document.style.background-color='red'

but it doesnt work,my lecturer said I have to change the external style sheet,I looked online for ways to do it,but had no luck

I don't believe you can have properties such as background-color due to the dash (incorrect syntax). Only way you could do something like that would be through style["background-color"], but I don't believe that is the correct anyway.

I believe you should go for document.body.style.background or document.body.style.backgroundColor.

Giblet

backgroundColor, the actual property, not the attribute that reflects the property.
It would be style["backgroundColor"] either.

28064212

Procasinator wrote: »

I don't believe you can have properties such as background-color due to the dash (incorrect syntax). Only way you could do something like that would be through style["background-color"], but I don't believe that is the correct anyway.

I believe you should go for document.body.style.background or document.body.style.backgroundColor.

D'oh! Well spotted. The correct one is document.body.style.backgroundColor

Procasinator

Giblet wrote: »

backgroundColor, the actual property, not the attribute that reflects the property.
It would be style["backgroundColor"] either.

Don't get your first line. Either the style["xxx"] or style.xxx would be valid.

Giblet

Sorry, just highlighting the different between attributes and properties.