reading CSS textdecoration

Eddie · Jul 13, 2003

When I use JavaScript to read an element's textDecoration style, I
only get one value even if there are more than one in the sytle sheet.

For example if the text-decoration is defined as:
text-decoration : underline overline;

when reading element.currentStyle.textDecoration I only get
"underline"!!

What's worse is that element.style.textDecorationUnderline returns
"false"!!!

I have spent most of today researching this issue on the Internet and
cannot find out how to determine if multiple decorations are set for
an element.

Complete example:

<HTML><HEAD><TITLE>Test</TITLE>
<STYLE>
a.test :link {
color : #00FF00;
text-decoration : underline overline;
}
</STYLE>
<SCRIPT language="JavaScript" type="text/JavaScript">

</SCRIPT>
</HEAD>
<BODY ONLOAD="bodyLoad()">
<A HREF="blank.htm" CLASS="test" ID="testLink">test</A>
</BODY></HTML>

Evertjan. · Jul 13, 2003

Eddie wrote on 13 jul 2003 in comp.lang.javascript:

When I use JavaScript to read an element's textDecoration style, I
only get one value even if there are more than one in the sytle sheet.

For example if the text-decoration is defined as:
text-decoration : underline overline;

when reading element.currentStyle.textDecoration I only get
"underline"!!

Logical, they are incompatible, it is like:

font-size:12pt 20pt;

Lasse Reichstein Nielsen · Jul 13, 2003

Evertjan. said:
Eddie wrote on 13 jul 2003 in comp.lang.javascript:

Logical, they are incompatible, it is like:

font-size:12pt 20pt;

Not at all. Writing
text-decoration: underline overline;
is perfectly valid, and should give both decorations (and does).
It just appears that IE's "currentStyle" access to the computed
style is bugged at this point. It only returns "underline", even
if the element is also "overline" and "line-through".

/L

DU · Jul 13, 2003

Eddie said:
When I use JavaScript to read an element's textDecoration style, I
only get one value even if there are more than one in the sytle sheet.

For example if the text-decoration is defined as:
text-decoration : underline overline;

when reading element.currentStyle.textDecoration I only get
"underline"!!

What's worse is that element.style.textDecorationUnderline returns
"false"!!!

I have spent most of today researching this issue on the Internet and
cannot find out how to determine if multiple decorations are set for
an element.

Complete example:

<HTML><HEAD><TITLE>Test</TITLE>

A suggestion: using valid markup code when editing page like that, you
can reduce cross-browser problems and also numerous pitfalls.

<STYLE>

a.test :link {

there should be no blank space between a.test and :link

color : #00FF00;
text-decoration : underline overline;
}

I did not try with an embedded style sheet but I'm sure it would still
work with a proper coding like:

if(document.all)
{
document.styleSheets[0].rules[0].style.textDecoration = StrValue;
}
else
{
document.styleSheets[0].cssRules[0].style.textDecoration = StrValue;
};

</STYLE>
<SCRIPT language="JavaScript" type="text/JavaScript">
<!-- Begin
function bodyLoad() {
var obj = document.getElementById('testLink');
alert(obj.currentStyle.textDecoration);
alert(obj.style.textDecorationUnderline);

textDecorationUnderline is NOT W3C web standards CSS2 but only MSIE
proprietary css property.

}
//End -->
</SCRIPT>
</HEAD>
<BODY ONLOAD="bodyLoad()">
<A HREF="blank.htm" CLASS="test" ID="testLink">test</A>
</BODY></HTML>

The following validated page works for Mozilla 1.4, NS 7.1, MSIE 6 SP1,
Opera 7.11 (small glitch in the alert box output)

DU
--
Javascript and Browser bugs:
http://www10.brinkster.com/doctorunclear/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />

<title>Multiple css property text-decoration values</title>

<style type="text/css">
body {margin:32px; color:black; background-color:white;}
</style>

<script type="text/javascript">
// <![CDATA[
function IdentifyTextDecoration()
{
var output = "";
output = document.getElementById("idP").style.textDecoration;
alert("document.getElementById('idP').style.textDecoration = " + output);
}
// ]]>
</script>
</head>

<body>

<p id="idP" style="text-decoration:underline overline;">Testing here</p>
<p><button type="button" onclick="IdentifyTextDecoration();">Show the
value of text-decoration</button></p>

</body></html>

DU · Jul 13, 2003

Lasse said:
Not at all. Writing
text-decoration: underline overline;
is perfectly valid, and should give both decorations (and does).
It just appears that IE's "currentStyle" access to the computed
style is bugged at this point. It only returns "underline", even
if the element is also "overline" and "line-through".

/L

I confirm your finding, only for currentStyle. This is also confirmed in
a book which goes like this: "IE's currentStyle object does not have
precisely the same properties as its style object. Missing from the
currentStyle object are the properties that contain combination values,
such as border or borderBottom. (...)" I could not find anything
official on this at MSDN.
So, according to that book, if the border value is 2px solid blue, then
obj.style.border should return 2px solid blue
while
obj.currentStyle.border should NOT return 2px solid blue

In any way, if the OP *really* needs to verify this for MSIE 6, he still
could (I guess) with the MSIE proprietary
obj.currentStyle.textDecorationUnderline and
obj.currentStyle.textDecorationOverline

Finally,
document.styleSheets[0].cssRules[1].style.textDecoration (W3C DOM 2 CSS
interface)
and
document.styleSheets[0].rules[1].style.textDecoration (MSIE DOM)
will return all the multiple text-decoration values.

DU

Lasse Reichstein Nielsen · Jul 13, 2003

DU said:
I confirm your finding, only for currentStyle. This is also confirmed
in a book which goes like this: "IE's currentStyle object does not
have precisely the same properties as its style object. Missing from
the currentStyle object are the properties that contain combination
values, such as border or borderBottom. (...)" I could not find
anything official on this at MSDN.

My first guess at whtat other propertie are affected would be the
shorthand properties. The shorthand "border" is short for all the
combinations of
border-{left/right/top/bottom}-{width/style/color}
and the computed value can be read using the non-shorthand names,
e.g., ".currentStyle.borderLeftWidth". Actually, even
".currentStyle.borderWidth" works, although it is also a shorthand.

However, "text-decoration" is not a shorthand property, so I would not
have guess it to be a property "such as border and borderBottom",
although the literal reading of the quote would include it. So much
for trying to second guess the documentors.

So, according to that book, if the border value is 2px solid blue, then
obj.style.border should return 2px solid blue

Only if the border value is set with an inline style attribute. The
style property of a DOM node corresponds to the style attribute of the
corresponding tag.

while
obj.currentStyle.border should NOT return 2px solid blue

.... and it is indeed undefined.

In any way, if the OP *really* needs to verify this for MSIE 6, he
still could (I guess) with the MSIE proprietary

obj.currentStyle.textDecorationUnderline and
obj.currentStyle.textDecorationOverline

The entire ".currentStyle" object is MSIE proprietary, so it's all
a matter of documentation. Without reading about it, I would have
assumed that "currentStyle" gave the computed style of the object.
Apparently that is not always the case.

/L

Eddie · Jul 15, 2003

Thanks for the responses. I resorted to reading the style sheet rather
than the element to work around this problem.

It's a small web app for myself, so I'm not concerned with
multi-browser support. MSIE suffices.

Cheers
Eddie

How to position the tooltip comment on these buttons?	9	Nov 4, 2023
Help with some CSS	2	Mar 29, 2023
Need assistance finetuning HTML, CSS, Javascript - sticky header issue	3	Feb 25, 2022
Google appscript	0	Oct 5, 2024
Need help with <rowspan> in an HTML table	1	Nov 6, 2024
Positioning CSS components	1	Nov 16, 2023
Closing an overlay outside the overlay as well	1	Dec 11, 2022
Not sure why drop-down is not working.	2	Mar 24, 2024

reading CSS textdecoration

Eddie

Evertjan.

Lasse Reichstein Nielsen

DU

DU

Lasse Reichstein Nielsen

Eddie

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads