GetElementBy"CLASS?!" [Archive]

AaronH

11-17-2008, 05:36 PM

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Classic Cars - Java Script Test Page</title>
<style type="text/css">
img {
border: 10px solid red;
}
#wrapper {
margin: 0px auto;
width: 1024;
}
</style>

<script type="text/javascript">
function ChangeBackground() {
document.getElementById('borderEdit').style.borderColor = '#000000';
}
</script>
</head>

<body>

<div id="wrapper">

<select>
<option>Thin</option>
<option>Fat</option>
<option>Fatter</option>
</select>
<select>
<option>Black</option>
<option>Red</option>
<option>White</option>
</select>
<input type="button" name="Button" onClick="ChangeBackground()" value="Edit Border Properties" />
<hr />
<img src="car1.jpg" alt="Classic Car 1" class="borderEdit" />
<img src="car2.jpg" alt="Classic Car 2" class="borderEdit" />
<br />
<img src="car3.jpg" alt="Classic Car 3" class="borderEdit" />
<img src="car4.jpg" alt="Classic Car 4" class="borderEdit" />
<br />

</div>

</body>

</html>

The above code gives me: http://up.themungo.com/veqwfeqwfqw.jpg

I want the button to change all the borders on the images to black and 1px... Don't worry about the select elements, i'll sort that out later... I can only get it to work with getElementById... But this is a class?

Ducatti

11-18-2008, 01:39 AM

This works for me

function getElementsByClassName(cl) {
var retnode = [];
var myclass = new RegExp('\\b'+cl+'\\b');
var elem = document.getElementsByTagName("*");
for (var i = 0; i < elem.length; i++) {
var classes = elem[i].className;
if (myclass.test(classes)) retnode.push(elem[i]);
}
return retnode;
}

eg:
allNodes = getElementsByClassName("validator");
for(i = 0; i < allNodes.length; i++) {
allNodes[i].innerHTML="";
}