469,365 Members | 1,819 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,365 developers. It's quick & easy.

IE not DOM for style?


Is it just me, or does
obj.setAttribute("style","border: thin solid navy");
(for example - no style seems to be set) not work in IE6 but works fine
in NN6?

I don't want to use element.style[.cssText] just because.
Any ideas?

Test file:

<html>
<head>
<title>Javascript test - dynamic elements</title>

<script type="text/javascript" language="javascript">
function createDiv(divId, appendElement)
{
STYLE="border: thin solid navy; width: 300px; height: 300px;";

// create
D = document.createElement("div");

// set attributes
D.setAttribute("id",divId);
D.setAttribute("style",STYLE);

// append element
appendElement.appendChild(D);
}

function testRun()
{
createDiv("div1",document.getElementById("target") );
}
</script>
</head>

<body>
<form name="f1">
<p>
<input type="button" name="b1" value="test it" onClick="testRun()">
</p>
</form>
<div id="target"></div>
</body>
</html>

-------------------------------------------------
~kaeli~
Press any key to continue or any other key to quit.
Who is General Failure and why is he reading
my hard disk?
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace
-------------------------------------------------
Jul 20 '05 #1
10 8756
Please correct me if I'm wrong, but style is an object and not a string.
When you do style="width:2.46em" in the definition of an HTML
element, it's actually shorthand for .style.width="2.46em".
I would opine that NN is exceptionally generous in dealing with
your approach. The snippet below shows that you can use
setAttribute in IE with the style object.

Csaba Gabor from New York

<body onLoad="makeBorder()">
<script type="text/javascript">
function makeBorder() {
var myDiv = document.getElementById("myDiv");
myStyle = myDiv.style;
myStyle.border = "thin solid navy"; // this shows the next line works
myDiv.setAttribute("style", myStyle);
}
</script>
<div id="myDiv">Hi Mom</div>
<body>
"kaeli" <in********************@NOSPAMatt.net> wrote in message news:MP************************@nntp.lucent.com...

Is it just me, or does
obj.setAttribute("style","border: thin solid navy");
(for example - no style seems to be set) not work in IE6 but works fine
in NN6?

I don't want to use element.style[.cssText] just because.
Any ideas?

Test file:

<html>
<head>
<title>Javascript test - dynamic elements</title>

<script type="text/javascript" language="javascript">
function createDiv(divId, appendElement)
{
STYLE="border: thin solid navy; width: 300px; height: 300px;";

// create
D = document.createElement("div");

// set attributes
D.setAttribute("id",divId);
D.setAttribute("style",STYLE);

// append element
appendElement.appendChild(D);
}

function testRun()
{
createDiv("div1",document.getElementById("target") );
}
</script>
</head>

<body>
<form name="f1">
<p>
<input type="button" name="b1" value="test it" onClick="testRun()">
</p>
</form>
<div id="target"></div>
</body>
</html>

-------------------------------------------------
~kaeli~
Press any key to continue or any other key to quit.
Who is General Failure and why is he reading
my hard disk?
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace
-------------------------------------------------

Jul 20 '05 #2
> Please correct me if I'm wrong, but style is an object and not a string.

I think this is an implementation question, how the browser exposes the
style object.

That said, setAttribute is known to be very buggy and unreliable in IE.
Just don't use it when you can use style.xxx instead.

Regards,
Svend
Jul 20 '05 #3
In article <bi********@dispatch.concentric.net>, ne**@CsabaGabor.com
enlightened us with...
Please correct me if I'm wrong, but style is an object and not a string.
Actually, most (if not all) attributes are properties of objects and
even object themselves, according to the DOM. The string you pass is the
name of that object.

--------
createAttribute
Creates an Attr of the given name. Note that the Attr instance can
then be set on an Element using the setAttributeNode method.

The Attr interface represents an attribute in an Element object.
Typically the allowable values for the attribute are defined in a
document type definition.

Attr objects inherit the Node interface,

setAttribute
Adds a new attribute. If an attribute with that name is already
present in the element, its value is changed to be that of the value
parameter.
-----------
Style is an object, but it is also a property of other objects.
http://www.mozilla.org/docs/dom/domr...style_ref.html

I would opine that NN is exceptionally generous in dealing with
your approach.
No, that is DOM, at least according to these guys...

http://www.webreference.com/programm...apps/chap5/2/3
..html

http://www.csie.ntu.edu.tw/~b7506051...style_ref.html

http://www.w3.org/TR/2000/REC-DOM-Le...1113/core.html
The snippet below shows that you can use
setAttribute in IE with the style object.


Thanks. But the ultimate goal is (was) to pass an entire style
definition as a string to a function, so setting each piece is not an
option. I guess I'll use classes instead.

I think IE is buggy on this one.
*sigh*
I used to have to worry about NN4. Now I find this.
Oh well.

-------------------------------------------------
~kaeli~
Press any key to continue or any other key to quit.
Who is General Failure and why is he reading
my hard disk?
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace
-------------------------------------------------
Jul 20 '05 #4
kaeli <in********************@NOSPAMatt.net> wrote in message news:<MP************************@nntp.lucent.com>. ..
In article <e5******************************@news.teranews.co m>,
sv********@svendtofte.com enlightened us with...

That said, setAttribute is known to be very buggy and unreliable in IE.
Just don't use it when you can use style.xxx instead.


I can't, but thanks. The goal is to not have to set individual style
elements in the function, but to allow that which calls the function to
be able to pass what it wants to set. I'm making a generic function to
be included on other pages.


set the cssText property of the node style, e.g.,

node.style.cssText = "a: whole; bunch: of; style: elements;"

According to http://www.w3.org/TR/2000/REC-DOM-Le...yleDeclaration

cssText of type DOMString
The parsable textual representation of the declaration block
(excluding the surrounding curly braces). Setting this attribute will
result in the parsing of the new value and resetting of all the
properties in the declaration block including the removal or addition
of properties.

I do not know which browsers support this.
Jul 20 '05 #5
> I can't, but thanks. The goal is to not have to set individual style
elements in the function, but to allow that which calls the function to
be able to pass what it wants to set. I'm making a generic function to be
included on other pages.


I don't understand why not. If you want to create a generic interface,
set/getAttribute is as generic as it gets. Instead, creating a generic
interface, that works, is more powerfull. Imagine:

function setStuff(elm,attrib,prop) {
if (attrib == "style") {
// first, split prop by ;
...
for (var i = 0; i < props.length; i++) {
// assuming attribs and propsvalue arrays
eval("elm.style."+attribs[i]+"="+propsvalue[i]);
}
} else if (bla bla) {
..
}
}

No, it's not optimal, but there's no reason not to use property g/setters,
where these are available. For the more simple stuff, just go:

if (blah) {
eval("elm."+attrib+"="+prop);
}

And in a last case, assuming the attrib wasn't recognized by any case, just
fall back on "setAttribute".

As far as I can see, the interface should be no different from
setAttribute, except you can, where browser bugs deem necessary, just use
the normal properties.

Regards,
Svend
Jul 20 '05 #6
> set the cssText property of the node style, e.g.,

ohh, good idea!
I do not know which browsers support this.


IE6 (and I know the cssText has been around in IE for a while at least) and
Moz does. Opera 7 doesn't, but it's so wonky in it's scripting style
support anyway.

Regards,
Svend
Jul 20 '05 #7
Svend Tofte <sv********@svendtofte.com> writes:

Unrelated to this discussion ...
eval("elm."+attrib+"="+prop);


You never need to use eval for accessing properties of objects.
Just write
elm[attrib]=prop;
It's much faster and it is easier to catch typos. Also, it only
works if prop.toString() is a literal for the value of prop. Strings
fail that, as .toString gives their content without quotes.

/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 #8
> Unrelated to this discussion ...
eval("elm."+attrib+"="+prop);


You never need to use eval for accessing properties of objects.
Just write
elm[attrib]=prop;
It's much faster and it is easier to catch typos. Also, it only
works if prop.toString() is a literal for the value of prop. Strings
fail that, as .toString gives their content without quotes.


Of course. With my shoddy coding, I think I need a sig like:

----
this code doesn't work. wait until someone corrects it :p
Jul 20 '05 #9
In article <a4******************************@news.teranews.co m>,
sv********@svendtofte.com enlightened us with...

I don't understand why not.


Because my users don't know how to do that. They need to see

// style
BACKGROUND="yellow";
and such to know how to change it simply.

For example, take my favorite menu - HVMenu (nope, not mine, I borrowed
it from dynamicdrive.com). The variables are all very easy to set, like
so.

var NoOffFirstLineMenus=11; // Number of first level
items
var LowBgColor='#D5D9FE'; // Background color when
mouse is not over
var LowSubBgColor='#D5D9FE'; // Background
color when mouse is not over on subs
var HighBgColor='black'; // Background color when
mouse is over
var HighSubBgColor='black'; // Background color when
mouse is over on subs
That's what I'm going for.

Thanks anyway!

-------------------------------------------------
~kaeli~
Press any key to continue or any other key to quit.
Who is General Failure and why is he reading
my hard disk?
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace
-------------------------------------------------
Jul 20 '05 #10
In article <15**************************@posting.google.com >, joe-
gg@zircon.seattle.wa.us enlightened us with...

set the cssText property of the node style, e.g.,

node.style.cssText = "a: whole; bunch: of; style: elements;"

According to http://www.w3.org/TR/2000/REC-DOM-Le...yleDeclaration


This seems to be an option. It worked in IE5+ and NN6+, the target
browsers...

function createTable(tableId, appendElement)
{
BORDER="thin solid navy;"; // the table box border
BGCOLOR="white;" // the background color of the whole table

// create table and tbody
T = document.createElement("table");
TB = document.createElement("tbody");

// set table and tbody attributes
T.setAttribute("id",tableId);
T.setAttribute("name",tableId);
T.style.cssText = "border:"+BORDER+"background-color:"+BGCOLOR;
TB.setAttribute("id",tableId+"_body");
TB.setAttribute("name",tableId+"_body");

// append elements
T.appendChild(TB);
appendElement.appendChild(T);
}
Thanks!
-------------------------------------------------
~kaeli~
Press any key to continue or any other key to quit.
Who is General Failure and why is he reading
my hard disk?
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace
-------------------------------------------------
Jul 20 '05 #11

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

1 post views Thread by Roy | last post: by
8 posts views Thread by pamelafluente | last post: by
6 posts views Thread by rongchaua | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by suresh191 | last post: by
1 post views Thread by Marylou17 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.