Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Nov 2008
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts

    GetElementBy"CLASS?!"

    Code:
    <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?

  • #2
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Get elements by class

    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="";
    }
    Last edited by Ducatti; 11-18-2008 at 01:44 AM. Reason: Add example


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •