/    Sign up×
Community /Pin to ProfileBookmark

Assigning a Style

Copy linkTweet thisAlerts:
Jan 12.2007

Ok, I am having trouble assigning a style to a td in both IE and Firefox. I would use [b]element.style.borderBottom = “1px solid #000”[/b] or whatever but the problem is the style attribute doesn’t exist for that element yet.

So, how to write in the style attribute for both IE and Firefox, with neither breaking?

setAttribute(“border-bottom”, “1px solid #000”);

…doesn’t seem to be liked by IE but is fine for FF. Any ideas?

to post a comment
JavaScript

9 Comments(s) ↴

Copy linkTweet thisAlerts:
@mrhooJan 12.2007 — Setting a style in IE requires writing to the element's style object.

This also works in the other browsers - as long as the page is text/html,

but not if you are serving appliction/xml.

element.style.borderBottom="1px solid #000"[/QUOTE]
Note- With this syntax you can't use the hyphen in the property name.

Capitalize the letter after the hyphen and it will be interpreted correctly.
Copy linkTweet thisAlerts:
@FangJan 12.2007 — Ok, I am having trouble assigning a style to a td in both IE and Firefox. I would use [b]element.style.borderBottom = "1px solid #000"[/b] or whatever but the problem is the style attribute doesn't exist for that element yet.[/QUOTE]
Doesn't matter, it will set the border.


setAttribute("border-bottom", "1px solid #000");[/QUOTE][I]border-bottom[/I] is not an attribute, [I]style[/I] is.
Copy linkTweet thisAlerts:
@MigauthorJan 12.2007 — Sorry i think I meant to write style.setAttribute("border-bottom"
Copy linkTweet thisAlerts:
@MigauthorJan 12.2007 — Doesn't matter, it will set the border.[/QUOTE]
But FF works and IE tells me [b]element.style[/b] is null or not an object. What does that mean then? I presumed it was because there is no style attribute yet.
Copy linkTweet thisAlerts:
@KorJan 12.2007 — Mig, your confusion stands in the fact that you don't sense that both methods do the same thing, sets an attribute and it;s value. The difference is only on the DOM level

[I]DOM 0:[/I]

[COLOR="Blue"]element.attribute=value;[/COLOR]

[I]DOM 1:[/I]

[COLOR="Blue"]element.setAttribute('attribute','value');[/COLOR]

Both suppose to do the same: set the HTML attribute and give it a value;

Now, the problem is that, as usual :rolleyes: , IE has it's own way to deal with some DOM 1 methods. In case of [B]style[/B], IE uses other syntax:

[COLOR="Blue"]element.setAttribute('cssText','border-bottom:1px solid #000');[/COLOR]

In this case (as in many others) the old DOM 0 syntax proved to be a better choise, at it is cross-broswer

[COLOR="Blue"][B]element.style.borderBottom='1px solid #000';[/B][/COLOR]

will work in all the browsers.
------


Fang, [B]style[/B] can be taken as a property, but as an object as well, as DOM 0 syntax is based on JSON. As an object, it may have it's own properties as well. [B]borderBottom[/B] is one of them. So, from the JSON point of view, [B]borderBottom[/B] [I]is[/I] an attribute (property)

[COLOR="Blue"]element['style']['borderBottom'][/COLOR]

Now, [B]style[/B] is the property of the object [B]element[/B], but at the same time it is the object which has the property [B]borderBottom[/B];

But I really understood what do you mean. Indeed border-bottom is not a [I]HTML native attribute[/I], it is a CSS attribute.
Copy linkTweet thisAlerts:
@FangJan 12.2007 — Careful using [I]cssText[/I]; it can reset(to default) previously set property values.
Copy linkTweet thisAlerts:
@KorJan 12.2007 — Careful using [I]cssText[/I]; it can reset(to default) previously set property values.[/QUOTE]
Nor do I stand for that method. As I said, DOM 0 syntax should always do the job because is based on the simple crossbrowser JSON.

I don't see which is the problem, [B]Mig[/B]... Use trustfully DOM 0.
Copy linkTweet thisAlerts:
@MigauthorJan 12.2007 — I tried. Initially I used that because I read it would work, but it didn't. It only worked in FF and IE said it could not find object style or it is null.

I have now just used className and made a class instead, which works.
Copy linkTweet thisAlerts:
@KorJan 12.2007 — I tried. Initially I used that because I read it would work, but it didn't. It only worked in FF and IE said it could not find object style or it is null.
[/QUOTE]
Should have worked as well. Some other error might have been occurred, but not that related with the DOM 0 syntax. Anyway, yes, indeed, I was prepared to say to you that a class switch is a cleaner and better way. Good luck.
×

Success!

Help @Mig spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...