473,405 Members | 2,310 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,405 software developers and data experts.

reading CSS textdecoration

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
6 20480
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
"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
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
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
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

0
by: Andy | last post by:
Hi, In the code below (not pretty I know but it's an early version :-P) I'm having problems reading the data object back in. If I move the reading code to immediately after the section where it...
6
by: Raymond Hettinger | last post by:
Found in a pamphlet at a pre-school: --------------------------------------- Reading improves vocabulary Reading raises cultural literacy through shared knowledge Reading develops writing skills...
4
by: Xah Lee | last post by:
# -*- coding: utf-8 -*- # Python # to open a file and write to file # do f=open('xfile.txt','w') # this creates a file "object" and name it f. # the second argument of open can be
24
by: Hendrik Schober | last post by:
Hi, I have a 'std::istream' and need to read its whole contents into a string. How can I do this? TIA; Schobi
19
by: Lionel B | last post by:
Greetings, I need to read (unformatted text) from stdin up to EOF into a char buffer; of course I cannot allocate my buffer until I know how much text is available, and I do not know how much...
4
by: Oliver Knoll | last post by:
According to my ANSI book, tmpfile() creates a file with wb+ mode (that is just writing, right?). How would one reopen it for reading? I got the following (which works): FILE *tmpFile =...
6
by: KevinD | last post by:
assumption: I am new to C and old to COBOL I have been reading a lot (self teaching) but something is not sinking in with respect to reading a simple file - one record at a time. Using C, I am...
9
by: Mike Reed | last post by:
I must be having a "senile" day! I cannot recall, nor get to work, code to read a cookie's expiration date/time in an ASP page/VBScript. What am I missing? *** Sent via Developersdex...
4
by: Gaijinco | last post by:
I had a file named nap.in which looks like this: 4 10:00 12:00 Lectures 12:00 13:00 Lunch, like always. 13:00 15:00 Boring lectures... 15:30 17:45 Reading 4 10:00 12:00 Lectures 12:00 13:00...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.