getElementsByClassName

**Michael Winter** · Jul 23 '05, 01:16 PM

Re: getElementsByCl assName

On Fri, 27 Aug 2004 16:56:05 +0100, Danny@Kendal
<danny@STOPSPAM ghpkendal.co.uk > wrote:

012345678901234 567890123456789 012345678901234 567890123456789 0123456789[color=blue]
> I want to change the styling of several <div> elements with just one
> onMouseOver event. "getElementsByC lassName" would be ideal if it hadn't
> been rejected. I can't seem to make getElementsByTa gName work and all
> the references I've seen don't help.[/color]

Seeing your code might help to see what went wrong. Try:

function getRefByTagName (n, b) {
b = b || document;
if(b.getElement sByTagName) {
return b.getElementsBy TagName(n);
} else if(b.all && b.all.tags) {
if('*' == n) {return b.all;}
else {return b.all.tags(n) || [];}
} else {return [];}
}

function myFunction() {
var cN, d = getRefByTagName ('DIV');

for(var i = 0, n = d.length; i < n; ++i) {
if('string' == typeof (cN = d[i].className)
&& -1 != cN.indexOf('myc lass'))
{
// do stuff with d[i]
}
}
}

(Untested)

[snip]
[color=blue]
> document.getEle mentById(idRef) .style.blahblah blah = morestuf[/color]

Don't forget to feature detect getElementById and the style object before
using them.

Hope that helps,
Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

**Grant Wagner** · Jul 23 '05, 01:16 PM

Re: getElementsByCl assName

"Danny@Kend al" wrote:
[color=blue]
> I want to change the styling of several <div> elements with just one
> onMouseOver event.
> "getElementsByC lassName" would be ideal if it hadn't been rejected.
> I can't seem to make getElementsByTa gName work and all the references I've
> seen don't help.
>
> The page in question has a variable number of <div> elements because I
> generate it with a server-side vbscript.
>
> I could create sequentially numbered IDs and write a short javascript to
> loop through the ID numbers (example below) but is there a more elegant
> solution?
>
> eg:
> <div id="ref1" class="myclass" ...
> <div id="ref2" class="myclass" ...
> <div id="ref3" class="myclass" ...
> <div id="ref4" class="myclass" ...
> <div id="ref5" class="myclass" ...
>
> then
> for(i=1;i<=5;i+ +)
> {
> idRef = "ref" + i
> document.getEle mentById(idRef) .style.blahblah blah = morestuf
> }[/color]

You don't need the variable assignment, but what you've got is the way to do
it. Since the number of DIVs is controlled by the server, you can have it sent
a length in client-side JavaScript:

var numberOfDivs = <%= numberOfDivs %>;
for (var i = 1; i <= numberOfDivs; i++) { // ...

but a better solution would be:

var i = 1, theDiv;
while ((theDiv = document.getEle mentById('ref' + i++)) != null) {
theDiv.style.co lor = 'Red';
}

Providing the DIVs are number sequentially starting at 1, your code will
always work, no matter how many DIVs you output. I'm not sure why you couldn't
get a getElementsByTa gName() working, it would be (although slower then the
algorithm shown above):

var divs = document.getEle mentsByTagName( 'div');
if (divs) {
for (var i = 0; i < divs.length; i++) {
if (divs[i].className == 'myclass') {
divs[i].style.color = 'Red';
}
}
}

Lastly, you might be better off having two classes, one with each set of
styles, in which case you can do:

var i = 1, theDiv;
while ((theDiv = document.getEle mentById('ref' + i++)) != null) {
theDiv.classNam e = 'myclassWithCol orRed';
}

--
Grant Wagner <gwagner@agrico reunited.com>
comp.lang.javas cript FAQ - http://jibbering.com/faq

**PDannyD** · Jul 23 '05, 01:16 PM

Re: getElementsByCl assName

"Grant Wagner" <gwagner@agrico reunited.com> wrote in message
news:412F6F5C.E C86A4D1@agricor eunited.com[color=blue]
> "Danny@Kend al" wrote:
>[color=green]
>> I want to change the styling of several <div> elements with just one
>> onMouseOver event.
>> "getElementsByC lassName" would be ideal if it hadn't been rejected.
>> I can't seem to make getElementsByTa gName work and all the
>> references I've seen don't help.
>>
>> The page in question has a variable number of <div> elements because
>> I generate it with a server-side vbscript.
>>
>> I could create sequentially numbered IDs and write a short
>> javascript to loop through the ID numbers (example below) but is
>> there a more elegant solution?
>>
>> eg:
>> <div id="ref1" class="myclass" ...
>> <div id="ref2" class="myclass" ...
>> <div id="ref3" class="myclass" ...
>> <div id="ref4" class="myclass" ...
>> <div id="ref5" class="myclass" ...
>>
>> then
>> for(i=1;i<=5;i+ +)
>> {
>> idRef = "ref" + i
>> document.getEle mentById(idRef) .style.blahblah blah = morestuf
>> }[/color]
>
> You don't need the variable assignment, but what you've got is the
> way to do it. Since the number of DIVs is controlled by the server,
> you can have it sent a length in client-side JavaScript:
>
> var numberOfDivs = <%= numberOfDivs %>;
> for (var i = 1; i <= numberOfDivs; i++) { // ...
>
> but a better solution would be:
>
> var i = 1, theDiv;
> while ((theDiv = document.getEle mentById('ref' + i++)) != null) {
> theDiv.style.co lor = 'Red';
> }
>
> Providing the DIVs are number sequentially starting at 1, your code
> will always work, no matter how many DIVs you output. I'm not sure
> why you couldn't get a getElementsByTa gName() working, it would be
> (although slower then the algorithm shown above):
>
> var divs = document.getEle mentsByTagName( 'div');
> if (divs) {
> for (var i = 0; i < divs.length; i++) {
> if (divs[i].className == 'myclass') {
> divs[i].style.color = 'Red';
> }
> }
> }
>
> Lastly, you might be better off having two classes, one with each set
> of styles, in which case you can do:
>
> var i = 1, theDiv;
> while ((theDiv = document.getEle mentById('ref' + i++)) != null) {
> theDiv.classNam e = 'myclassWithCol orRed';
> }[/color]

That would do it very, very nicely. Many thanks. Now I'm looking forward to
getting back to work after the bank holiday weekend. :-)

I think the getElementsByTa gName didn't work because I was trying to use it
like getElementById. Having seen your example above it has explained a lot.

--
FZS600 - Silver/Black
GS125 - Black/Rust
Ford 100E Prefect - Black, naturally
Whisky - Aberlour Cask Strength

getElementsByClassName

getElementsByClassName

Comment

Comment

Comment