Doing CSS via JavaScript

[Aaron Gray]

Hi,

I have a single line of CSS that I want to do via JavaScript :-

p { margin: 0px; }

How do I go about this ?

Many thanks in advance,

Aaron

[petermichaux]

> I have a single line of CSS that I want to do via JavaScript

What does the "do" mean? Where does this need to be inserted? Can it be
inserted into the head element of your html doc?

Peter

[Aaron Gray]

>> I have a single line of CSS that I want to do via JavaScript

What does the "do" mean?
Where does this need to be inserted? Can it be
inserted into the head element of your html doc?

I have a document in an IFrame and want to modify its CSS setting to make
paragraphs have zero margins.

Aaron

[Ian Collins]

Aaron Gray wrote:

Hi,

I have a single line of CSS that I want to do via JavaScript :-

p { margin: 0px; }

How do I go about this ?

It's easy to change the style on a single element in JavaScript, but in
order to do what you want, you will have to find all the p elements and
apply the style to each element returned.

Something like (untested)

var paras = document.getElementsByTagName('p');

for( var i = paras.length-1; i >= ); --i )
{
paras[i].style.margin = '0px';
}

--
Ian Collins.

[Aaron Gray]

> Aaron Gray wrote:

Hi,

I have a single line of CSS that I want to do via JavaScript :-

p { margin: 0px; }

How do I go about this ?

It's easy to change the style on a single element in JavaScript, but in
order to do what you want, you will have to find all the p elements and
apply the style to each element returned.

Something like (untested)

var paras = document.getElementsByTagName('p');

for( var i = paras.length-1; i >= ); --i )
{
paras[i].style.margin = '0px';
}

No I need to alter the CSS for the document not the actual document itself.

Aaron

[Ian Collins]

Aaron Gray wrote:

Aaron Gray wrote:

Hi,

I have a single line of CSS that I want to do via JavaScript :-

p { margin: 0px; }

How do I go about this ?

It's easy to change the style on a single element in JavaScript, but in
order to do what you want, you will have to find all the p elements and
apply the style to each element returned.

Something like (untested)

var paras = document.getElementsByTagName('p');

for( var i = paras.length-1; i >= ); --i )
{
paras[i].style.margin = '0px';
}

No I need to alter the CSS for the document not the actual document itself.

Why and to what end?
--
Ian Collins.

[Aaron Gray]

"Ian Collins" <ia******@hotmail.com> wrote in message
news:49************@individual.net...

Aaron Gray wrote:

No I need to alter the CSS for the document not the actual document
itself.

Why and to what end?

Ah. Now that would be telling, just a project I am working on :)

I think I have a handle on doing this now, but am really working in the
dark.

Aaron

[Ian Collins]

Aaron Gray wrote:

I have a single line of CSS that I want to do via JavaScript

What does the "do" mean?
Where does this need to be inserted? Can it be
inserted into the head element of your html doc?

I have a document in an IFrame and want to modify its CSS setting to make
paragraphs have zero margins.

I'm sure you'll find you have to do it the way I suggested, styles are
applied while the markup is rendered, before onload for the page gets
called. So once the page is displayed, you have to change the style on
each element directly.

--
Ian Collins.

[Aaron Gray]

"Ian Collins" <ia******@hotmail.com> wrote in message
news:49************@individual.net...

I'm sure you'll find you have to do it the way I suggested, styles are
applied while the markup is rendered, before onload for the page gets
called. So once the page is displayed, you have to change the style on
each element directly.

Try this then :-

function SetClassStyle( clazz, style, value)
{
if (document.styleSheets)
{
for( var styleSheetNo = 0; styleSheetNo < document.styleSheets.length;
styleSheetNo++)
{
var styleSheet = document.styleSheets[styleSheetNo];
var rules = styleSheet.rules | styleSheet.cssRules;

if (!rules) return; // err ???

for ( var rule = 0; rule < rules.length; rule++)
if ( rules[rule].selectorText.toLowerCase() == clazz)
rules[rule].style[style] = value;
}
}
else // No stylesheet
{
var all = getElementByTagName("*");

for ( var element = 0; element < all.length; element++)
if ( all[element].className == clazz)
all[element].style[style] = value;
}
}

Only if there is no stylesheet do you have to do it by tags !:)

Aaron

[Ian Collins]

Aaron Gray wrote:

"Ian Collins" <ia******@hotmail.com> wrote in message
news:49************@individual.net...

I'm sure you'll find you have to do it the way I suggested, styles are
applied while the markup is rendered, before onload for the page gets
called. So once the page is displayed, you have to change the style on
each element directly.

Try this then :-

function SetClassStyle( clazz, style, value)
{
if (document.styleSheets)
{
for( var styleSheetNo = 0; styleSheetNo < document.styleSheets.length;
styleSheetNo++)
{
var styleSheet = document.styleSheets[styleSheetNo];
var rules = styleSheet.rules | styleSheet.cssRules;

if (!rules) return; // err ???

for ( var rule = 0; rule < rules.length; rule++)
if ( rules[rule].selectorText.toLowerCase() == clazz)
rules[rule].style[style] = value;
}
}
else // No stylesheet
{
var all = getElementByTagName("*");

for ( var element = 0; element < all.length; element++)
if ( all[element].className == clazz)
all[element].style[style] = value;
}
}

Only if there is no stylesheet do you have to do it by tags !:)

OK, if this works, I've learnt my lesson for the day!

--
Ian Collins.

[Ian Collins]

Aaron Gray wrote:

"Ian Collins" <ia******@hotmail.com> wrote in message
news:49************@individual.net...

I'm sure you'll find you have to do it the way I suggested, styles are
applied while the markup is rendered, before onload for the page gets
called. So once the page is displayed, you have to change the style on
each element directly.

Try this then :-

Thinking about is a bit more, why do this when you can simply use a
style tag?

Also is this is to run before styles are applied, there won't be any
elements in the DOM beyond the current script, so the else part is void.
function SetClassStyle( clazz, style, value)
{
if (document.styleSheets)
{
for( var styleSheetNo = 0; styleSheetNo < document.styleSheets.length;
styleSheetNo++)
{
var styleSheet = document.styleSheets[styleSheetNo];
var rules = styleSheet.rules | styleSheet.cssRules;

if (!rules) return; // err ???

for ( var rule = 0; rule < rules.length; rule++)
if ( rules[rule].selectorText.toLowerCase() == clazz)
rules[rule].style[style] = value;
}
}
else // No stylesheet
{
var all = getElementByTagName("*");

for ( var element = 0; element < all.length; element++)
if ( all[element].className == clazz)
all[element].style[style] = value;
}
}

Only if there is no stylesheet do you have to do it by tags !:)

Aaron

--
Ian Collins.

[Aaron Gray]

"Ian Collins" <ia******@hotmail.com> wrote in message
news:49************@individual.net...

Thinking about is a bit more, why do this when you can simply use a
style tag?
Belive me my app needs it to do a work around on a work around. Its pritty
hairy stuff at the edges of browser behaviour.
Also is this is to run before styles are applied, there won't be any
elements in the DOM beyond the current script, so the else part is void.

Right.

It will not create a new style rule at the moment thats what I am stuck on
now.

Anyone know how to add a new rule to the CSS using this javascript approach
?

Aaron

[Ian Collins]

Aaron Gray wrote:

"Ian Collins" <ia******@hotmail.com> wrote in message
news:49************@individual.net...

Thinking about is a bit more, why do this when you can simply use a
style tag?

Belive me my app needs it to do a work around on a work around. Its pritty
hairy stuff at the edges of browser behaviour.

Also is this is to run before styles are applied, there won't be any
elements in the DOM beyond the current script, so the else part is void.

Right.

It will not create a new style rule at the moment thats what I am stuck on
now.

Anyone know how to add a new rule to the CSS using this javascript approach
?

Do you control what's in the iframe you mentioned? That's what's
confusing me, if you are displaying your own page, you can control when
scripts are run, if not, you have to fix it after the page has loaded.

--
Ian Collins.

[Aaron Gray]

"Ian Collins" <ia******@hotmail.com> wrote in message
news:49************@individual.net...

Do you control what's in the iframe you mentioned? That's what's
confusing me, if you are displaying your own page, you can control when
scripts are run, if not, you have to fix it after the page has loaded.

Yes, the IFrame is user edittable using HTML DesignMode.

There are several bugs in the MS implementation of design mode that I am
doing work arounds for.

Aaron

[Ian Collins]

Aaron Gray wrote:

"Ian Collins" <ia******@hotmail.com> wrote in message
news:49************@individual.net...

Do you control what's in the iframe you mentioned? That's what's
confusing me, if you are displaying your own page, you can control when
scripts are run, if not, you have to fix it after the page has loaded.

Yes, the IFrame is user edittable using HTML DesignMode.

There are several bugs in the MS implementation of design mode that I am
doing work arounds for.

Ah, 'bugs' and 'MS' in the same sentence....

Then you do have to change the page after it has loaded. So you will
have to go through each element.

--
Ian Collins.

[Aaron Gray]

"Ian Collins" <ia******@hotmail.com> wrote in message
news:49************@individual.net...

Aaron Gray wrote:

"Ian Collins" <ia******@hotmail.com> wrote in message
news:49************@individual.net...

Do you control what's in the iframe you mentioned? That's what's
confusing me, if you are displaying your own page, you can control when
scripts are run, if not, you have to fix it after the page has loaded.

Yes, the IFrame is user edittable using HTML DesignMode.

There are several bugs in the MS implementation of design mode that I am
doing work arounds for.

Ah, 'bugs' and 'MS' in the same sentence....

Yep.
Then you do have to change the page after it has loaded. So you will
have to go through each element.

No, hopefully if I can get the darn thing to work now I will be onto the
next bug...no reloads...no iterations...

Unfortunately I cannot get the code I showed earlier to work properly now,
its from Google and definately used to work fine !?

Aaron

[Aaron Gray]

"Aaron Gray" <an********@gmail.com> wrote in message
news:49************@individual.net...

I have a single line of CSS that I want to do via JavaScript :-

p { margin: 0px; }

document.styleSheets[0].addRule( "P", "margin:0px");

It came down to a one liner :)

Aaron

[Thomas 'PointedEars' Lahn]

Aaron Gray wrote:

function SetClassStyle( clazz, style, value)
{
if (document.styleSheets)
{
for( var styleSheetNo = 0; styleSheetNo < document.styleSheets.length;
styleSheetNo++)
for (var styleSheetNo = document.styleSheets.length; styleSheetNo--;)

See below.
{
var styleSheet = document.styleSheets[styleSheetNo];
var rules = styleSheet.rules | styleSheet.cssRules;
You definitely want

var rules = styleSheet.rules || styleSheet.cssRules;

instead. `|' is the binary OR (converting its operands to number and
evaluating to a number), you want the logical one (converting the operands
to boolean and evaluating the second operand only if the first one yields
`false'.
if (!rules) return; // err ???

for ( var rule = 0; rule < rules.length; rule++)
Otherwise, this loop will never execute as the number assigned has no
`length' property. It should also be

for (var rule = rules.length; rule--;)

which is more efficient.
if ( rules[rule].selectorText.toLowerCase() == clazz)
This will never be true, as class selectors start with a dot (".").
Unless you expect the caller to provide the dot prefix, of course.

It will also not apply for class selectors as combined simple selector.
rules[rule].style[style] = value;
}
}
else // No stylesheet
{
var all = getElementByTagName("*");

for ( var element = 0; element < all.length; element++)
for (var element = all.length; element--;)

You will observe that, in fact, you need only two iterator variables here.
if ( all[element].className == clazz)
Same problem as above.
[...]

PointedEars

[Aaron Gray]

"Thomas 'PointedEars' Lahn" <Po*********@web.de> wrote in message
news:58****************@PointedEars.de...

Aaron Gray wrote:

function SetClassStyle( clazz, style, value)
{
if (document.styleSheets)
{
for( var styleSheetNo = 0; styleSheetNo < document.styleSheets.length;
styleSheetNo++)

for (var styleSheetNo = document.styleSheets.length; styleSheetNo--;)

See below.

{
var styleSheet = document.styleSheets[styleSheetNo];
var rules = styleSheet.rules | styleSheet.cssRules;

You definitely want

var rules = styleSheet.rules || styleSheet.cssRules;

instead. `|' is the binary OR (converting its operands to number and
evaluating to a number), you want the logical one (converting the operands
to boolean and evaluating the second operand only if the first one yields
`false'.

if (!rules) return; // err ???

for ( var rule = 0; rule < rules.length; rule++)

Otherwise, this loop will never execute as the number assigned has no
`length' property. It should also be

for (var rule = rules.length; rule--;)

which is more efficient.

if ( rules[rule].selectorText.toLowerCase() == clazz)

This will never be true, as class selectors start with a dot (".").
Unless you expect the caller to provide the dot prefix, of course.

It will also not apply for class selectors as combined simple selector.

rules[rule].style[style] = value;
}
}
else // No stylesheet
{
var all = getElementByTagName("*");

for ( var element = 0; element < all.length; element++)

for (var element = all.length; element--;)

You will observe that, in fact, you need only two iterator variables here.

if ( all[element].className == clazz)

Same problem as above.

[...]

PointedEars

That was reworked Googles code; although they had a . prefix added to clazz.

Thanks, I will do a rewrite :)

Aaron