/    Sign up×
Community /Pin to ProfileBookmark

how to change a CSS class property

Copy linkTweet thisAlerts:
Feb 12.2004

Hi, I have a page with several DIVs of the same class

<DIV class = “divUnMenuNavegacion”>
this is div1
</DIV>
<DIV class = “divUnMenuNavegacion”>
this is div2
</DIV>

They’re made with ASP and in this case I can’t know how many DIVs there will be, so forget about solving it by using id’s for the Divs.
I want to change the right margin of all the DIVs with JavaScript (depending on the screen resolution), so:

Is it possible to change a property of a CSS class with JavaScript????

to post a comment
JavaScript

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@gil_davisFeb 12.2004 — There is a rather complex and cross-browser unfriendly way to walk through a stylesheet to find a class and change a rule. However, once the page has rendered, changing the rule does not affect the object, so you need to change the rule before the DIV is resolved by the client.

It may be easier to create a separate stylesheet with only the DIV class in it. Immediately after the stylesheet insert code that detects the resolution and changes the rule.

For example, in IE:
document.styleSheets[0].rules.item(".divUnMenuNavegacion").style
gets you the style definition for the class called "divUnMenuNavegacion". In NS 7:
document.styleSheets[0].cssRules.item(".divUnMenuNavegacion").stylewill get the same thing. You can set whatever style attribute you need, but it must be done before the DIV is rendered.
Copy linkTweet thisAlerts:
@cobianzoauthorFeb 12.2004 — good trick, thanks
Copy linkTweet thisAlerts:
@Paul_JrFeb 13.2004 — There any other way? I always thought [FONT=courier new]document.getElementByClassName('ClsNme')[/FONT] would work. Or [FONT=courier new]document.getElementsByClassName('ClsNme')[/FONT]. I mean, there's one for ID, why not Class?
Copy linkTweet thisAlerts:
@fredmvFeb 13.2004 — [i]Originally posted by Paul Jr [/i]

[B]I mean, there's one for ID, why not Class?[/B][/QUOTE]Likely because multiple elements can have the same [font=courier]class[/font]. However, while [font=courier]document.getElementsByClassName[/font] is not a default method in JavaScript, it has been [url=http://simon.incutio.com/archive/2003/03/25/getElementByClassName]implemented[/url].
Copy linkTweet thisAlerts:
@Paul_JrFeb 13.2004 — [i]Originally posted by fredmv [/i]

[B]Likely because multiple elements can have the same [font=courier]class[/font]. [/b][/quote]
I fail to see why that would be a problem. You create classes to assign styles to multiple elements. So, if [font=courier]document.getElementsByClassName[/font] was a default method in JS, you would be using it to change multiple elements.

[i]Originally posted by fredmv [/i]

[B]However, while [font=courier]document.getElementsByClassName[/font] is not a default method in JavaScript, it has been [url=http://simon.incutio.com/archive/2003/03/25/getElementByClassName]implemented[/url]. [/B][/QUOTE]
Ooo, I'll take a look at that, thanks. ?
Copy linkTweet thisAlerts:
@fredmvFeb 13.2004 — [i]Originally posted by Paul Jr [/i]

[B]I fail to see why that would be a problem.[/B][/QUOTE]What I'm saying is that when you call [font=courier]document.getElementById[/font], you are referring to one particular element since the [font=courier]id[/font] should be unique to that particular element. If [font=courier]document.getElementsByClassName[/font] was a real method, it would only make sense if it returned an array of references to all elements with that particular [font=courier]class[/font] defined. I do see what you're trying to say though.
×

Success!

Help @cobianzo 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,
)...