reading CSS textdecoration

**Evertjan.** · Jul 20 '05, 09:05 AM

Re: reading CSS textdecoration

Eddie wrote on 13 jul 2003 in comp.lang.javas cript:
[color=blue]
> 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.current Style.textDecor ation I only get
> "underline" !![/color]

Logical, they are incompatible, it is like:

font-size:12pt 20pt;

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

**Lasse Reichstein Nielsen** · Jul 20 '05, 09:05 AM

Re: reading CSS textdecoration

"Evertjan." <exjxw.hannivoo rt@interxnl.net > writes:
[color=blue]
> Eddie wrote on 13 jul 2003 in comp.lang.javas cript:[/color]
[color=blue][color=green]
> > For example if the text-decoration is defined as:
> > text-decoration : underline overline;[/color][/color]
[color=blue][color=green]
> > when reading element.current Style.textDecor ation I only get
> > "underline" !![/color][/color]
[color=blue]
> Logical, they are incompatible, it is like:
>
> font-size:12pt 20pt;[/color]

Not at all. Writing
text-decoration: underline overline;
is perfectly valid, and should give both decorations (and does).
It just appears that IE's "currentSty le" 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
--
Lasse Reichstein Nielsen - lrn@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit. html>
'Faith without judgement merely degrades the spirit divine.'

DU · Jul 20 '05, 09:05 AM

Re: reading CSS textdecoration

Eddie wrote:
[color=blue]
> 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.current Style.textDecor ation I only get
> "underline" !!
>
> What's worse is that element.style.t extDecorationUn derline 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><TI TLE>Test</TITLE>[/color]

A suggestion: using valid markup code when editing page like that, you
can reduce cross-browser problems and also numerous pitfalls.
[color=blue]
> <STYLE>[/color]

<style type="text/css">
[color=blue]
> a.test :link {[/color]

there should be no blank space between a.test and :link
[color=blue]
> color : #00FF00;
> text-decoration : underline overline;
> }[/color]

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.styleS heets[0].rules[0].style.textDeco ration = StrValue;
}
else
{
document.styleS heets[0].cssRules[0].style.textDeco ration = StrValue;
};

[color=blue]
> </STYLE>
> <SCRIPT language="JavaS cript" type="text/JavaScript">
> 
> </SCRIPT>
> </HEAD>
> <BODY ONLOAD="bodyLoa d()">
> <A HREF="blank.htm " CLASS="test" ID="testLink">t est</A>
> </BODY></HTML>[/color]

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:

IIS 7.5 Detailed Error - 404.0 - Not Found

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>Multip le 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 IdentifyTextDec oration()
{
var output = "";
output = document.getEle mentById("idP") .style.textDeco ration;
alert("document .getElementById ('idP').style.t extDecoration = " + output);
}
// ]]>
</script>
</head>

<body>

<p id="idP" style="text-decoration:unde rline overline;">Test ing here</p>
<p><button type="button" onclick="Identi fyTextDecoratio n();">Show the
value of text-decoration</button></p>

</body></html>

DU · Jul 20 '05, 09:06 AM

Re: reading CSS textdecoration

Lasse Reichstein Nielsen wrote:
[color=blue]
> "Evertjan." <exjxw.hannivoo rt@interxnl.net > writes:
>
>[color=green]
>>Eddie wrote on 13 jul 2003 in comp.lang.javas cript:[/color]
>
>[color=green][color=darkred]
>>>For example if the text-decoration is defined as:
>>>text-decoration : underline overline;[/color][/color]
>
>[color=green][color=darkred]
>>>when reading element.current Style.textDecor ation I only get
>>>"underline"! ![/color][/color]
>
>[color=green]
>>Logical, they are incompatible, it is like:
>>
>>font-size:12pt 20pt;[/color]
>
>
> Not at all. Writing
> text-decoration: underline overline;
> is perfectly valid, and should give both decorations (and does).
> It just appears that IE's "currentSty le" 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[/color]

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.borde r should return 2px solid blue
while
obj.currentStyl e.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.currentStyl e.textDecoratio nUnderline and
obj.currentStyl e.textDecoratio nOverline

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

DU
--
Javascript and Browser bugs:

IIS 7.5 Detailed Error - 404.0 - Not Found

http://www10.brinkster.com/doctorunclear/

**Lasse Reichstein Nielsen** · Jul 20 '05, 09:06 AM

Re: reading CSS textdecoration

DU <drunclear@hotR EMOVEmail.com> writes:
[color=blue]
> 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.[/color]

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.
[color=blue]
> So, according to that book, if the border value is 2px solid blue, then
> obj.style.borde r should return 2px solid blue[/color]

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.
[color=blue]
> while
> obj.currentStyl e.border should NOT return 2px solid blue[/color]

.... and it is indeed undefined.
[color=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.currentStyl e.textDecoratio nUnderline and
> obj.currentStyl e.textDecoratio nOverline[/color]

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

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit. html>
'Faith without judgement merely degrades the spirit divine.'

**Eddie** · Jul 20 '05, 09:07 AM

Re: reading CSS textdecoration

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

reading CSS textdecoration

reading CSS textdecoration

Comment

Comment

Comment

Comment

Comment

Comment