473,379 Members | 1,323 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,379 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 20475
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...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...
0
by: ryjfgjl | last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
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

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.