Menu
Hi folks –
I have a bit of a dilemma with a project I’m working on and could use some help. I’m trying to change the visibility of all instances of a particular class in a page.
This is an example of what the HTML looks like:
[code]<div id=”nav1″><img src=””>
<div class=”textcolor”>here is some text</div>
</div>
The id increases by 1 from nav1 to nav6. The class “textcolor” is the one I want to affect.
The catch is this is being developed for a special browser that only supports a small subset of DOM 1 and Javascript 1.3. I’ve tried cycling through each tag using [b]allPageTags = document.getElementsByTagName(“*”)[b]if (allPageTags[i].className==”textColor”)
Can anyone recommend a way for me to accomplish this?
Thanks!
[i]Originally posted by Charles [/i]
[B]There is no "document.getElementsByClassName()", perhaps because elements can belong to several different classes at once, but there is a "document.getElementsByName()". It's ugly, but you could give every element with the className of "textColor" that name. [/B][/QUOTE]
<div class="textclr' name='textclr'>foo</div>[code=php]var elems = document.getElementsByName('textclr');
for(var i=0,a;a=elems[i];i++) {
a.style.color = "forecolor";
}[/code]Or your way should work ...:[code=php]var elems = document.getElementsByTagName('div');
for(var i=0,a;a=elems[i];i++) {
if(a.className=="textclr") {
a.style.color = "forecolor";
}
}[/code]Dr. Script[i]Originally posted by neilio [/i]Good ... I like Coke ?
[B]Wow, thanks for the speedy replies, everyone! I owe you all a Coke.
How would the syntax for that look like? I'm still learning the DOM and my assumption is that, if the items in question do not have a "name" attribute assigned, I can't access them with getElementsByName, right?
Neil [/B][/QUOTE]
[code=php]<script type="text/javascript">
document.getElementsByClassName = function(clss,tag) {
var a=document.getElementsByTagName(tag);
var obj = new Object();
for(var i=0,e,j=0;e=a[i];i++) {
if(e.className==clss) {
obj[j]=e;
j++;
}
}
return obj;
}
window.onload = function() {
var elems = document.getElementsByClassName('txts','div');
for(var i=0,a;a=elems[i];i++) {
a.style.color = "blue";
}
}
</script>
<div class="txts">Fee</div>
<div class="othr">Fie</div>
<div class="othr">Foe</div>
<div class="txts">Fum</div>[/code]The .getElementsByClassName() method has two parameters, both required. The className (first param) and the tag name (second param). The window onload function is just an example, it can be implemented in many ways.[code=php]<script type="text/javascript">
onload = function() {
alert(document.getElementById('nav1').childNodes.item(1).className);
// return "abc";
}
/* alerts undefined. will alert abc if
return line is uncommented. */
alert(window.onload());
</script>[/code]Dr. Script[code=php]<script type="text/javascript">
onload = function() {
for(var i=0,a;i<document.getElementById('nav1').childNodes.length;i++) {
a=document.getElementById('nav1').childNodes[i].className;
alert("Node "+ i +" : "+ a);
}
}
</script>
<div id="nav1">
<div class="a1"> </div>
<div class="a2"> </div>
<div class="a3"> </div>
</div>[/code]Dr. ScriptI stil ldon't udnerstand why you can only use the three methods, Neil..[/QUOTE]
<div id="navID1"><img>
<div class="navNumTextDiv" name="navNumTextDiv">1</div>
</div><i>
</i>// hide text hints
var textDivs = document.getElementsByName('navNumTextDiv');
for (var i=0,a;a=textDivs[i];i++) {
a.style.visibility = "hidden";
}[code=php]var textDivs = document.getElementsByName('navNumTextDiv');
for (var i=0,a;i<textDivs.length;i++) {
a = textDivs[i];
a.style.visibility = "hidden";
}[/code]Same purpose overall. You should be able to use this, as this is a correct usage of document.getElementsByName() method.[code=php]var textDivs = document.getElementById('nav1');
for (var i=0,a;i<textDivs.children.length;i++) {
a = textDivs[i];
a.style.visibility = "hidden";
}[/code]That should work as well.<div id="navNewsDiv"><img src="images/nav/navNews_i.gif" width="128" height="97"
border="0" id="newsImg"><br />
<div class="navNumTextDiv" name="navNumTextDiv">1</div><div id="navNewsDiv"><img src="images/nav/navNews_i.gif" width="128" height="97"
border="0" id="newsImg"><br />
<div class="navNumTextDiv" name="navNumTextDiv">1</div>
</div><div id="navNewsDiv"><img src="images/nav/navNews_i.gif" width="128" height="97"
border="0" id="newsImg"><br />
<div class="navNumTextDiv" name="navNumTextDiv">1</div>
<div class="navNumTextDiv" name="navNumTextDiv">2</div>
<div class="navNumTextDiv" name="navNumTextDiv">3</div>
<div class="navNumTextDiv" name="navNumTextDiv">4</div>
<div class="navNumTextDiv" name="navNumTextDiv">5</div>
<div class="navNumTextDiv" name="navNumTextDiv">6</div>
</div><div id="navNewsDiv"><img src="images/nav/navNews_i.gif" width="128" height="97"
border="0" id="newsImg"><br />
<div class="navNumTextDiv" name="navNumTextDiv">1</div>
</div>
<div id="navMusicDiv"><img src="images/nav/navMusic_i.gif" width="128" height="97"
border="0" id="newsImg"><br />
<div class="navNumTextDiv" name="navNumTextDiv">2</div>
</div>
etc...[code=php]<script type="text/javascript">
function something(bln) {
var textDivs = document.getElementById('nav');
for (var i=0,a;i<textDivs.children.length;i++) {
a = textDivs.children[i];
if(a.nodeName == "DIV") {
a.children[2].style.visibility = bln.toProp();
}
}
}
Boolean.prototype.toProp = function() {
return (this==true) ? "hidden" : "visible";
}
</script>
<div id="nav">
<div id="nav1">
<img src="..." width="128" height="97" border="0" id="..."><br />
<div class="navNumTextDiv" name="navNumTextDiv">1</div>
</div>
<div id="nav2">
<img src="..." width="128" height="97" border="0" id="..."><br />
<div class="navNumTextDiv" name="navNumTextDiv">2</div>
</div>
<div id="nav3">
<img src="..." width="128" height="97" border="0" id="..."><br />
<div class="navNumTextDiv" name="navNumTextDiv">3</div>
</div>
<div id="nav4">
<img src="..." width="128" height="97" border="0" id="..."><br />
<div class="navNumTextDiv" name="navNumTextDiv">4</div>
</div>
<div id="nav5">
<img src="..." width="128" height="97" border="0" id="..."><br />
<div class="navNumTextDiv" name="navNumTextDiv">5</div>
</div>
<div id="nav6">
<img src="..." width="128" height="97" border="0" id="..."><br />
<div class="navNumTextDiv" name="navNumTextDiv">6</div>
</div>
<input type="checkbox" onclick="something(this.checked)" value="Do Something!">Hide/Show
</div>[/code](The images aren't right, and all the div names are changed for easy copy/paste. The only name that matters is the parent div.0.1.9 — BETA 6.16