473,545 Members | 2,088 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Stylesheet problem with generated nodes

I'm having trouble applying a stylesheet to content I'm generating
after the fact.

Here's the sample code:

<html>
<head>
<title>CSS/DOM Problem Example</title>
<style type="text/css">
..historylinks {
a:link { color: blue; text-decoration: none }
a:active { color: red; text-decoration: none }
a:visited { color: blue; text-decoration: none }
a:hover { color: green; text-decoration: underline }
}
</style>
<script type="text/javascript">
function writeToHistory () {
var hlist = document.getEle mentById("histo ryList");
var li = document.create Element('li');
var a = document.create Element('a');
a.appendChild(d ocument.createT extNode('Test!' ));
a.setAttribute( "onClick", "alert(\"Alert! \");");
a.setAttribute( "class", "historylinks") ;
li.appendChild( a);
hlist.insertBef ore(li,hlist.fi rstChild);
}
</script>
</head>
<body>
<p>When you click this button, a new link appears at the top of the
history list.
Click on one of these links to perform an action.</p>
<button onClick="writeT oHistory();">Te st</button>
<ul id="historyList ">
<li>End of History</li>
</ul>
</body>
</html>

Mozilla reports that it doesn't understand the "a" declaration, and
that might be a part of it, but as far as I can tell it's valid CSS. I
tried assigning the style with both a.className and a.setAttribute;
both generate valid HTML, but neither takes.

(After /that/ I need to figure out why IE6 won't popup the Alert
box...)

I appreciate any help you offer.

Dec 15 '06 #1
11 2408
je*****@gmail.c om wrote:
<style type="text/css">
.historylinks {
a:link { color: blue; text-decoration: none }
a:active { color: red; text-decoration: none }
a:visited { color: blue; text-decoration: none }
a:hover { color: green; text-decoration: underline }
}
You can't nest CSS that way, you need e.g.
.historylinks a:link { ... }
.historylinks a:active { ... }
.historylinks a:visited { ... }
.historylinks a:hover { ... }
var a = document.create Element('a');
a.appendChild(d ocument.createT extNode('Test!' ));
a.setAttribute( "onClick", "alert(\"Alert! \");");
Don't use setAttribute when scripting HTML documents, IE's
implementation is much different from what the W3C DOM specifies and
other browsers like Mozilla implement. Use element properties e.g.

a.onclick = function () { alert("Alert!") ; };

and e.g.
a.setAttribute( "class", "historylinks") ;
a.className = "historylin ks";

that works across user agents when scripting HTML.
--

Martin Honnen
http://JavaScript.FAQTs.com/
Dec 15 '06 #2
VK

je*****@gmail.c om wrote:
a.setAttribute( "onClick", "alert(\"Alert! \");");
a.setAttribute( "class", "historylinks") ;
li.appendChild( a);
hlist.insertBef ore(li,hlist.fi rstChild);
<html>
<head>
<title>Demo</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function init() {
var lnk = document.links[0];
lnk.setAttribut e('onclick', 'abrakadabra');
window.alert(ln k.getAttribute( 'onclick'));
// displays "abrakadabr a"
}
window.onload = init;
</script>
</head>
<body>
<h1><a href="/">Demo</a></h1>
</body>
</html>

How strange, setAttribute / getAttribute seem working just fine
everywhere, including IE...

Oh, got it! You meant to say: "Setting onclick attribute value in the
relevant DOM Tree node is not always equal to setting onclick event
handler in the element's scriptable DOM Interface".

The question is then: why in the name would it be otherwise? It is true
that some browsers do parse attrubute values and do update the
interface thus they are making
element.setAttr ibute('onclick' , 'strValue');
and
element.onclick = myFunction;
equal up to some extend (only "up to some extend" because DOM Tree and
DOM Interface are too different to completely hide it).

Such convenience "bridging" is neither directly prohibited nor required
by the current specs. It means that there can be always UA's without
such extension. One of such UA happens to take 85% or more of the
current market share: thusly it is highly recommended for now do not
use behavioral extension of setAttribute: use the standard interface
scripting methods instead:

a.onclick = myFunction;
a.className = 'historylinks';

Dec 15 '06 #3
Martin Honnen wrote:
Don't use setAttribute when scripting HTML documents, IE's
implementation is much different from what the W3C DOM specifies and
other browsers like Mozilla implement. Use element properties e.g.

a.onclick = function () { alert("Alert!") ; };

and e.g.
> a.setAttribute( "class", "historylinks") ;

a.className = "historylin ks";

that works across user agents when scripting HTML.
Not altogether sound advice. IE /correctly/ refuses to set element
properties that are described as "read-only" in the DOM, but does allow
them to be set by setAttribute(). Firefox /incorrectly/ accepts the
property setting.

E.g.,

var post = document.create Element("input" );
post.type = "submit";

will incorrectly work under Firefox, but correctly fail under IE, whereas

var post = document.create Element("input" );
post.setAttribu te("type", "submit");

will work everywhere.

--
John W. Kennedy
"The blind rulers of Logres
Nourished the land on a fallacy of rational virtue."
-- Charles Williams. "Taliessin through Logres: Prelude"
Dec 15 '06 #4
VK said the following on 12/15/2006 2:16 PM:
<snip>

Is there some reason you would put a request in the subject yet you have
absolutely nothing in your post regarding any possible wording for an
entry? If you want to request an entry, by all means do so. But don't
imply in the subject that you want one and then not even mention it in
the post.

--
Randy
Chance Favors The Prepared Mind
comp.lang.javas cript FAQ - http://jibbering.com/faq
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Dec 16 '06 #5
John W. Kennedy wrote:
IE /correctly/ refuses to set element
properties that are described as "read-only" in the DOM, but does allow
them to be set by setAttribute(). Firefox /incorrectly/ accepts the
property setting.

E.g.,

var post = document.create Element("input" );
post.type = "submit";
The current W3C DOM specification is W3C DOM Level 2 HTML
<http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-62883744>
it does not say that the type property (respectively type attribute in
IDL terms) of HTMLInputElemen t objects is readonly. So using that sample
above to claim a DOM implementation is incorrectly accepting changes to
readonly properties is rubbish, that property is not readonly at all.
will incorrectly work under Firefox, but correctly fail under IE,
Both IE/Win (tested with IE 6) and Mozilla/Firefox allow the above code
without errors, that is creating a new input element object and setting
its type property directly after that before the input element object is
inserted into the document:

<http://home.arcor.de/martin.honnen/javascript/2006/12/test2006121601. html>
whereas

var post = document.create Element("input" );
post.setAttribu te("type", "submit");

will work everywhere.
See above test case, it does not make a difference in IE or Mozilla
whether you use inputElement.ty pe (or input['type']) or
inputElement.se tAttribute('typ e', '...'). The problem with IE's HTML DOM
and setAttribute is that it pays attention to the case of attribute
names and that it wants typed property values and not attribute strings:
<http://msdn.microsoft. com/library/default.asp?url =/workshop/author/dhtml/reference/methods/setattribute.as p>
There it clearly says that the second argument is not (always) a string
but rather a variant that can be a boolean, string or number. Then it
has a third argument to indicate whether case should matter or not, by
default it matters. In the W3C Core DOM the setAttribute method has two
attributes that are always strings, and there is no third attribute.
Where IE 6 refuses to set the type (but it refuses it with setAttribute
as well as setting the type property) is when the input is already in
the document:
<http://home.arcor.de/martin.honnen/javascript/2006/12/test2006121602. html>
So I think my advice is sound, in general and in particular for the
example properties the original poster had, onclick and className.

--

Martin Honnen
http://JavaScript.FAQTs.com/
Dec 16 '06 #6
ASM
Martin Honnen a écrit :
>
See above test case, it does not make a difference in IE or Mozilla
whether you use inputElement.ty pe (or input['type']) or
inputElement.se tAttribute('typ e', '...').
Yes that does any difference with my Firefox, but ...
The problem with IE's HTML DOM
and setAttribute is that it pays attention to the case of attribute
names and that it wants typed property values and not attribute strings:
<http://msdn.microsoft. com/library/default.asp?url =/workshop/author/dhtml/reference/methods/setattribute.as p>
my IE (Mac) doesn't accept to set type attribute what you'll can try
(the function breaks/stop from this point)
So I think my advice is sound, in general and in particular for the
example properties the original poster had, onclick and className.
nothing previously declared
--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date
Dec 16 '06 #7
ASM said the following on 12/16/2006 11:20 AM:
Martin Honnen a écrit :
>>
See above test case, it does not make a difference in IE or Mozilla
whether you use inputElement.ty pe (or input['type']) or
inputElement.s etAttribute('ty pe', '...').

Yes that does any difference with my Firefox, but ...
>The problem with IE's HTML DOM and setAttribute is that it pays
attention to the case of attribute names and that it wants typed
property values and not attribute strings:
<http://msdn.microsoft. com/library/default.asp?url =/workshop/author/dhtml/reference/methods/setattribute.as p>


my IE (Mac) doesn't accept to set type attribute what you'll can try
(the function breaks/stop from this point)
IE on a Mac wouldn't be my choice of a browser to choose to use as a
demo of whether something works or not.

--
Randy
Chance Favors The Prepared Mind
comp.lang.javas cript FAQ - http://jibbering.com/faq
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Dec 16 '06 #8
Randy Webb wrote:
ASM said the following on 12/16/2006 11:20 AM:
<snip>
>my IE (Mac) doesn't accept to set type attribute what you'll
can try (the function breaks/stop from this point)

IE on a Mac wouldn't be my choice of a browser to choose to
use as a demo of whether something works or not.
I don't know, Mac IE might be a very good choice for demonstrating
something not working ;-)

Richard.
Dec 16 '06 #9
ASM
Richard Cornford a écrit :
Randy Webb wrote:
>ASM said the following on 12/16/2006 11:20 AM:
<snip>
>>my IE (Mac) doesn't accept to set type attribute what you'll
can try (the function breaks/stop from this point)
IE on a Mac wouldn't be my choice of a browser to choose to
use as a demo of whether something works or not.

I don't know, Mac IE might be a very good choice for demonstrating
something not working ;-)
some things work better than with IE 6

and ... you do what you want about info I can give ... :-(

Now I can also talk about my NC4 :-)
(I doesn't more see functions with gEBI taking care if it can be used)

--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date
Dec 16 '06 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
1645
by: Steven An | last post by:
I'm gonna describe the situation I'm dealing with..but if you're not interested, just skip to the last line where I bluntly ask my question :) Here's my scenario: I've got a huge website that has many pages. Each page has its own content (which changes often). So I wanna use XSLT stylesheets to create these pages (so I can modify the...
3
2122
by: Alvaro G Vicario | last post by:
I'm writing a small script to scan an HTML document and append a <span class="foo">Bar</span> node after each item with certain class name. My script works fine in Gecko but IE has a serious issue: the CSS style defined in an external sheet for span.foo is not applied. The generated HTML shows the correct attribute has been inserted (I can...
2
3499
by: Richard L Rosenheim | last post by:
I loaded a XSLT stylesheet into a XMLDocument to retrieve some of the data. I received an exception when the SelectNodes method was invoked. The message was "System.Xml.XPath.XPathException - Namespace Manager or XsltContext needed. This query has a prefix, variable, or user-defined function." Q324899 I queried MSDN for Namespace Manager...
2
2120
by: Mark | last post by:
I got this code from the Internet. Demo on the site works fine but downloaded version is not. I am a very new to .NET, I cannot figure this out, please help. Here is the code: ASPX code: <%@ Register TagPrefix="iewc" Namespace="Microsoft.Web.UI.WebControls" Assembly="Microsoft.Web.UI.WebControls" %><%@ Page language="c#"...
4
3102
by: pbreah | last post by:
I'm doing a Rich Text Editor (WYSIWYG) in javascript for a game for kids. I'm doing a special case in with every keystroke from A-Z creates a background and foreground color for that letter, witch is the same. The problem is editing doesn't work that well. For example when I type: ABCDFG , I get this code generated and displayed by the Rich...
1
285
by: jesdynf | last post by:
I'm having trouble applying a stylesheet to content I'm generating after the fact. Here's the sample code: <html> <head> <title>CSS/DOM Problem Example</title> <style type="text/css"> ..historylinks {
1
1387
by: arunsh | last post by:
Hi I want an equivalent of what the getChildNodes() method does in xsl style sheet. (Note that the getChildNodes() method returns an array of nodes u nder the current node; ) My xml is dynamically generated, so cannot use XPath expression.All I know is the current Node say for eg <Books> . Under <Books> tags there are some more nested...
2
2353
by: milecimm | last post by:
Hello, I need some help to solve the following problem (if it is possible, that's it): I'm using a xpath expression to programatically get data from my xml file. I want to transform ONLY the resulting nodes using xslt. In my example below I only want the Academic category to be transformed. Is this possible? (please vb.net or c#). Many...
6
2542
by: _Who | last post by:
I use the code below to change to a style sheet that has: body { ....
0
7473
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, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
0
7408
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 effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language...
0
7661
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, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. ...
0
7815
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 tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
0
7763
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 protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...
1
5340
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 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 a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes...
0
4949
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert...
0
3458
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in...
0
712
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...

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.