IE not DOM for style?

K

kaeli

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
-------------------------------------------------
 
C

Csaba2000

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>
 
S

Svend Tofte

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
 
K

kaeli

Please correct me if I'm wrong, but style is an object and not a string.
Click to expand...

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/domref/dom_style_ref.html

I would opine that NN is exceptionally generous in dealing with
your approach.
Click to expand...

No, that is DOM, at least according to these guys...

http://www.webreference.com/programming/javascript/mozillaapps/chap5/2/3
..html

http://www.csie.ntu.edu.tw/~b7506051/docs/GeckoDOM/dom_style_ref.html

http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html
The snippet below shows that you can use
setAttribute in IE with the style object.
Click to expand...

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
-------------------------------------------------
 
J

Joe Kelsey

kaeli said:
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.
Click to expand...

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-Level-2-Style-20001113/css.html#CSS-CSSStyleDeclaration

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.
 
S

Svend Tofte

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.
Click to expand...

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+"="+propsvalue);
}
} 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
 
S

Svend Tofte

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

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

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
 
L

Lasse Reichstein Nielsen

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

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
 
S

Svend Tofte

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

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.
Click to expand...

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

kaeli

I don't understand why not.
Click to expand...

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
-------------------------------------------------
 
K

kaeli

joe- said:
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-Level-2-Style-20001113/css.html#CSS-CSSStyleDeclaration
Click to expand...

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
-------------------------------------------------
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Filename undefined for Blob ? 1
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Need help , Having problem with Drag n Drop ? 9
Justify-content not working 1
Slideshow not working properly 2
Top NOT top? 2
Help with code 0
Snowing Effect 2

Members online

Total: 23 (members: 1, guests: 22)
Robots: 90

Forum statistics

Threads
473,780
Messages
2,569,608
Members
45,252
Latest member
MeredithPl

Latest Threads

Top