Changing CSS with Javascript

[Adam]

Hi all,

Is there a way to edit the properties of a CSS pseudo class using
Javascript? I have some code that changes the text colour in a div
element to a given value, but it doesn't affect the links. For
example, to change the text in "mydiv" to #FF0000, I'd use

document.getElementById("mydiv").style.color="#FF0000";

In CSS this would be written as #mydiv{color:#FF0000;}. What I want to
do is change the :link and :visited pseudo-classes in the same way,
i.e. to replicate the following CSS code using Javascript:

#mydiv a:link, a:visited{color:#FF0000;}

Any help would be very gratefully received!

Many thanks,
Adam

 

[Thomas 'PointedEars' Lahn]

document.getElementById("mydiv").style.color="#FF0000";
[...]
In CSS this would be written as #mydiv{color:#FF0000;}.

No, it would not. The above script code is equivalent to

<... id="mydiv" style="color: #FF0000" ...>

The difference is the greater specificity of the `style' attribute value

What I want to do is change the :link and :visited pseudo-classes in the
same way, i.e. to replicate the following CSS code using Javascript:

#mydiv a:link, a:visited{color:#FF0000;}

Any help would be very gratefully received!

RTFM, STFG, STFW.

http://www.w3.org/TR/DOM-Level-2-Style/css.html

The StyleSheet interface is implemented as document.styleSheets, and the
CSSRuleList interface is implemented as document.stylesheets[...].cssRules
in Gecko-based UAs and document.stylesheets[...].rules in MSHTML-based UAs.

You are looking for the writable `selectorText' property.

That said, it is a really bad idea to have general links, activated links
and visited links all look alike. If you don't want that and want to add
new rules instead, ISTM you have to add a new style element which content
you define:

http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-2141741547
http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-1975348127
http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-184E7107


HTH

PointedEars

 

[VK]

Is there a way to edit the properties of a CSS pseudo class using
Javascript?

On some browsers (including Firefox) you may change pseudo class rules
using abstractView accessor: but IE doesn't provide means to script
pseudo class rules - other words one may do "elm.style.color=red" but
there is not equivalent for say :hover or :active. MSDN does note this
fact but doesn't say any sorry for that so it is a by design feature
of Microsoft DOM and not a bug to fix any soon. This way the generic
answer is "no, there is no way".

One workaround is to have a set of classes for A element including
subsequent pseudo classes defined as well like:

A.foo {
color: blue;
}
A.foo:hover {
color: red;
}

A.bar {
color: yellow;
}
A.bar:hover {
color: green;
}

And then switch className for involved links.

That works for a limited set of styles only of course. If you are
making a runtime design template with a proprietary amount of rule
combinations, then it is a royal headache I am having no obvious
solution for besides runtime string generation of a set of rules and
their injection into applied stylesheet.

 

[Thomas 'PointedEars' Lahn]

On some browsers (including Firefox) you may change pseudo class rules
using abstractView accessor:

AbstractView is an interface of W3C DOM Level 2 Views that is implemented
by Window objects. It has nothing to do with stylesheets.

http://msdn2.microsoft.com/en-us/library/ms537489(VS.85).aspx

You are confusing it with the getComputedStyle() method of the ViewCSS
interface which only inherits from AbstractView. The aforementioned method
only allows read-only access to the computed stylesheet object of a
*specific* element or pseudo-*element* object, and _not_ write access to a
certain pseudo-class rule.

http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-ViewCSS

but IE doesn't provide means to script pseudo class rules

Yes, it does. Try

document.styleSheets[0].rules[0].style.textDecoration = "underline";

with an HTML document that only includes this stylesheet:

a:hover {
text-decoration: none;
}

And you will observe that after the above assignment links that are hovered
on are then underlined. Tested positive in IE versions 4.01, 5.01, 5.5 (all
standalone versions, so maybe not representative), and versions 6.0 and
7.0.5730.11.xpsp_sp2_gdr.070227-2254.

See also http://msdn2.microsoft.com/en-us/library/ms537489(VS.85).aspx


PointedEars

 

[VK]

On some browsers (including Firefox) you may change pseudo class rules

AbstractView is an interface of W3C DOM Level 2 Views that is implemented
by Window objects. It has nothing to do with stylesheets.
You are confusing it with the getComputedStyle() method of the ViewCSS
interface which only inherits from AbstractView.

Indeed, sorry. I meant document.defaultView.getComputedStyle method

The aforementioned method
only allows read-only access to the computed stylesheet object of a
*specific* element or pseudo-*element* object, and _not_ write
access to a certain pseudo-class rule.

At least theoretically ComputedCSSStyleDeclaration object returned by
getComputedStyle method should allow editing via setProperty method
but on Gecko it leads to runtime error "Modification is not allowed"

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<title>Demo</title>
<style type="text/css">
A.foo {
color: blue;
text-decoration: none;
font-weight: normal;
}
A.foo:hover {
color: red;
text-decoration: underline;
font-weight: bold;
}
</style>
<script type="text/javascript">

var state = -1;

function demo() {
var lnk = document.links[0];
var css = document.defaultView.
getComputedStyle(lnk, '');
if (state == -1) {
window.alert(css.getPropertyValue('font-weight'));
state = 1;
}
else if (state == 1) {
try {
css.setProperty('font-weight', 'normal', '');
}
catch(e) {
window.alert(e.message);
}
}
return false;
}
</script>
</head>
<body>
<p>
<a class="foo" href="http://www.example.com/"
onclick="return demo()">Hover me, then click</a>
</p>
</body>

but IE doesn't provide means to script pseudo class rules

Yes, it does. Try

document.styleSheets[0].rules[0].style.textDecoration = "underline";

with an HTML document that only includes this stylesheet:

a:hover {
text-decoration: none;
}

And you will observe that after the above assignment links that are hovered
on are then underlined. Tested positive in IE versions 4.01, 5.01, 5.5 (all
standalone versions, so maybe not representative), and versions 6.0 and
7.0.5730.11.xpsp_sp2_gdr.070227-2254.

Yes, it works! So another, more adjustable option besides className
switching.

 

[Thomas 'PointedEars' Lahn]

Indeed, sorry. I meant document.defaultView.getComputedStyle method


At least theoretically ComputedCSSStyleDeclaration object returned by
getComputedStyle method should allow editing via setProperty method

No, in this case it should not.

but on Gecko it leads to runtime error "Modification is not allowed"

As specified.

,-<http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-ViewCSS>
|
| Interface /ViewCSS/ (introduced in DOM Level 2)
|
| This interface represents a CSS view. The `getComputedStyle' method
| provides a *read only access* to the /computed values/ of an element.


The attribution lines were missing from your posting. Please include them
next time. http://www.jibbering.com/faq/faq_notes/clj_posts.html#ps1Post


PointedEars