473,569 Members | 2,621 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

IE not DOM for style?


Is it just me, or does
obj.setAttribut e("style","bord er: 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>Javascri pt test - dynamic elements</title>

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

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

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

// append element
appendElement.a ppendChild(D);
}

function testRun()
{
createDiv("div1 ",document.getE lementById("tar get"));
}
</script>
</head>

<body>
<form name="f1">
<p>
<input type="button" name="b1" value="test it" onClick="testRu n()">
</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 9068
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="makeBor der()">
<script type="text/javascript">
function makeBorder() {
var myDiv = document.getEle mentById("myDiv ");
myStyle = myDiv.style;
myStyle.border = "thin solid navy"; // this shows the next line works
myDiv.setAttrib ute("style", myStyle);
}
</script>
<div id="myDiv">Hi Mom</div>
<body>
"kaeli" <in************ ********@NOSPAM att.net> wrote in message news:MP******** *************** *@nntp.lucent.c om...

Is it just me, or does
obj.setAttribut e("style","bord er: 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>Javascri pt test - dynamic elements</title>

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

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

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

// append element
appendElement.a ppendChild(D);
}

function testRun()
{
createDiv("div1 ",document.getE lementById("tar get"));
}
</script>
</head>

<body>
<form name="f1">
<p>
<input type="button" name="b1" value="test it" onClick="testRu n()">
</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********@dis patch.concentri c.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 setAttributeNod e 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************ ********@NOSPAM att.net> wrote in message news:<MP******* *************** **@nntp.lucent. com>...
In article <e5************ *************** ***@news.terane ws.com>,
sv********@sven dtofte.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.cssT ext = "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,at trib,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]+"="+propsva lue[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."+att rib+"="+prop);
}

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

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********@sve ndtofte.com> writes:

Unrelated to this discussion ...
eval("elm."+att rib+"="+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."+att rib+"="+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.terane ws.com>,
sv********@sven dtofte.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="yel low";
and such to know how to change it simply.

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

var NoOffFirstLineM enus=11; // Number of first level
items
var LowBgColor='#D5 D9FE'; // Background color when
mouse is not over
var LowSubBgColor=' #D5D9FE'; // Background
color when mouse is not over on subs
var HighBgColor='bl ack'; // 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

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

Similar topics

4
5453
by: lawrence | last post by:
Can anyone tell me why this code works in Netscape 7.1 but not in IE??? <SCRIPT type='text/javascript'> function makeVisible(nameOfDiv) { document.getElementById(nameOfDiv).style.visibility='visible'; document.getElementById(nameOfDiv).style.height='auto'; if (nameOfDiv != 'weblogs')
1
2015
by: Roy | last post by:
Hey all. All I'm trying to do is get a darn double solid bar in my datagrid footer. Doesn't seem to work. Any tips? The weird thing is all the other stylesheet attributes work. If I increase the font size it's reflected, etc... Here's my style sheet code: ..Footer { border-top-style:double; border-top-color:Black;
0
2614
by: cedoucette | last post by:
I just wrote code to support sortable columns in a datagrid. It seems to work fine; but, it doesn't look right. The problem is that I have a generic style for links and a different style for the header row - and they conflict. The sortable column apparently uses the generic style for <a> elements and the rest of the header uses "headerRow". ...
1
9020
by: RonY | last post by:
I have a dropdown which calls SetTimePeriod method on change the selection. In the JS function, I reset the field style.display based on what the selection is. This works fine with IE but not working with Firefox browser. The firefox browser has problem to display a field after its style.display is reset. At the end of the JS function, I...
8
6675
by: JT | last post by:
Hi, I have done a fair amount of style editing inline in ASP. I'm now using VS 2005 with a standard web project (not Web Application Project). This is my first foray into CSS in a style sheet and also my first true attempt at using master pages. I tried setting up a style sheet with a simple setting to float an image to the right and it...
8
41498
by: pamelafluente | last post by:
Hi guys, Is it possible to add "onload" (via Javascript) a new class to the <styleheader section? If yes, how would that be done ? <style type="text/css" media="screen"> .NewStyleClass{ whatever } </style>
6
13759
by: rongchaua | last post by:
Hi all, I want to change the style of a button. But I don't know how to do it. For example, I have already a button OK on form. I want to add these styles to this button (WS_CHILD || WS_VISIBLE || WS_CLIPSIBLINGS || WS_TABSTOP || BS_FLAT). What should I do now? All help will be appreciated. rca.
3
1899
by: Michellevt | last post by:
Hi I am working on a project (for college) and wondered if anyone can help me with my problem. In the project we are not allowed to make use of any "style" attributes but "class" attributes instead. The following is the java script that i am using and i am having trouble in using a class instead of a style tag because simply replacing the...
3
1948
Claus Mygind
by: Claus Mygind | last post by:
I want to move some style setting into a javaScript function so I can make them variable but I get "invalid assignment left-hand side" error? see my question at the bottom of this message. It works fine when I stream it out in my html page like this: <DIV ID="popSearch" STYLE=" position:absolute; visibility:hidden;
4
1975
by: HNPandey | last post by:
<HTML> <HEAD> <META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=windows-UTF8"> <TITLE></TITLE> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <STYLE TYPE="text/css"> <!--
0
7625
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
7935
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
8144
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...
1
7692
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...
0
5244
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
3677
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...
1
2128
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
1
1235
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
0
969
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.