By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,382 Members | 1,637 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,382 IT Pros & Developers. It's quick & easy.

reading CSS textdecoration

P: n/a
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">
<!-- Begin
function bodyLoad() {
var obj = document.getElementById('testLink');
alert(obj.currentStyle.textDecoration);
alert(obj.style.textDecorationUnderline);
}
//End -->
</SCRIPT>
</HEAD>
<BODY ONLOAD="bodyLoad()">
<A HREF="blank.htm" CLASS="test" ID="testLink">test</A>
</BODY></HTML>
Jul 20 '05 #1
Share this Question
Share on Google+
6 Replies


P: n/a
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;

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
Jul 20 '05 #2

P: n/a
"Evertjan." <ex**************@interxnl.net> writes:
Eddie wrote on 13 jul 2003 in comp.lang.javascript:
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;


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
--
Lasse Reichstein Nielsen - lr*@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 20 '05 #3

P: n/a
DU
Eddie wrote:
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>
<style type="text/css">
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.textDecoratio n;
alert("document.getElementById('idP').style.textDe coration = " + 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>

Jul 20 '05 #4

P: n/a
DU
Lasse Reichstein Nielsen wrote:
"Evertjan." <ex**************@interxnl.net> writes:

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


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;

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
--
Javascript and Browser bugs:
http://www10.brinkster.com/doctorunclear/

Jul 20 '05 #5

P: n/a
DU <dr*******@hotREMOVEmail.com> writes:
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
--
Lasse Reichstein Nielsen - lr*@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 20 '05 #6

P: n/a
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
Jul 20 '05 #7

This discussion thread is closed

Replies have been disabled for this discussion.