is "" a legal color string?

Chris Riesbeck · Oct 29, 2003

I need to remove colors put on links with Javascript so that CSS hover
works on uncolored links. Both background color and transparent turn
off the hover effect, and null doesn't remove the color. I discovered
that the empty string worked in IE 6, Mozilla 1.1 and Opera 7. But is
that legal? If not, what is the right way? Here's a toy demo of the
working page:

<html><head><title>Example</title>

<style type="text/css">
a:hover { background-color: #FFFF66;}
body { background-color: #FFFFFF; font-size: 24pt;}
</style>

<script type="text/javascript">
var oldLink;

function select(link) {
if (oldLink) oldLink.style.backgroundColor = ""; // OK???
oldLink = link;
link.style.backgroundColor = "#CCCC33";
}
</script>
</head>
<body>
<p>
<a href="#" onclick="select(this)">Line 1</a><br>
<a href="#" onclick="select(this)">Line 2</a><br>
<a href="#" onclick="select(this)">Line 3</a><br>
<a href="#" onclick="select(this)">Line 4</a><br>
<a href="#" onclick="select(this)">Line 5</a><br>
</p>
</body>
</html>

Lasse Reichstein Nielsen · Oct 29, 2003

I need to remove colors put on links with Javascript so that CSS hover
works on uncolored links. Both background color and transparent turn
off the hover effect, and null doesn't remove the color. I discovered
that the empty string worked in IE 6, Mozilla 1.1 and Opera 7. But is
that legal? If not, what is the right way? Here's a toy demo of the
working page:

if (oldLink) oldLink.style.backgroundColor = ""; // OK???

Yes. Setting a property of the style object to the empty string is
the way to clear it.

The style object/property corresponds to the style attribute in HTML.
Setting a property to the empty string corresponds to that CSS property
not being set in the style attribute string.

Check:
<div id="foo" style="color:red;font-family:sans-serif;">X</div>
<script type="text/javascript">
var elem = document.getElementById("foo");
alert(elem.style.cssText);
elem.style.backgroundColor = "black";
alert(elem.style.cssText);
elem.style.backgroundColor = "";
alert(elem.style.cssText);
</script>

As to whether it is valid ... there is no law against it, and it seems
to work. There is noting in the W3C DOM 2 Style CSS specification about
what happens when you assign an empty string. It doesn't event say that
".style.backgroundColor" is a valid l-value.

There is nothing in the Gecko DOM reference about writing empty
strings to style properties, nor in Microsoft's DHTML reference.

So, cross your fingers. It seems to be a widely accepted practice,
so you can expect browsers to support it for a long time to come.

/L

Dropdown menu in a fixed navbar	2	Apr 1, 2024
I need help making a zooming function	11	Dec 14, 2021
Help with code	0	Jun 11, 2022
Working on mobile css menu with plenty of frustration!	2	Dec 29, 2022
I need help fixing my website	2	Oct 15, 2023
Help me sort out this script	1	Oct 17, 2023
I Need Help with making a function that draws in a canvas using location data.	1	Dec 17, 2021
How to position the tooltip comment on these buttons?	9	Nov 4, 2023

is "" a legal color string?

Chris Riesbeck

Lasse Reichstein Nielsen

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads