Go Back   TechArena Community > Software > Software Development
Become a Member!
Forgot your username/password?
Tags Active Topics RSS Search Mark Forums Read

Sponsored Links



javascript get element by class

Software Development


Reply
 
Thread Tools Search this Thread
  #1  
Old 06-03-2010
Member
 
Join Date: Nov 2009
Posts: 518
javascript get element by class
  

I am a student and working on a small web project which is designing with the help of HTML and java script.I have a question regrading this project and I hope,you all will help me to solve my query.My Question is that Is there a way to access an element by class instead of ID so you could assign an action to more than one element at once?

Please,It's all depends on your suggestion.

Thanks.

Reply With Quote
  #2  
Old 06-03-2010
Member
 
Join Date: Oct 2005
Posts: 2,389
javascript get element by class

Hi !

This is very nice question and I think it can be done through the class named getelementbyclass which can be suitable to access all the elements of your page.

As a student,I will suggest you to use some different thing which are new in and being used by most of the developers.You are also an student and can perform different experiments of using different things.

You can use Jquery for this which is newer and can help you a lot.
Reply With Quote
  #3  
Old 06-03-2010
Member
 
Join Date: May 2008
Posts: 2,383
javascript getelementbyclass

Before starting anything, just take a look on some important discussion.The modern browsers have already implemented the getElementsByClassName() method.

I am going to show you a code which will access the elements of page during loading of page .The getelementbyclass can be used in the program as follows-

Code:
onload=function(){
if (document.getElementsByClassName == undefined) {
	document.getElementsByClassName = function(className)
	{
		var hasClassName = new RegExp("(?:^|\\s)" + className + "(?:$|\\s)");
		var allElements = document.getElementsByTagName("*");
		var results = [];

		var element;
		for (var i = 0; (element = allElements[i]) != null; i++) {
			var elementClass = element.className;
			if (elementClass && elementClass.indexOf(className) != -1 && hasClassName.test(elementClass))
				results.push(element);
		}

		return results;
	}
}
}
__________________
The FIFA Manager 2009 PC Game
Reply With Quote
  #4  
Old 06-03-2010
Member
 
Join Date: Feb 2008
Posts: 1,848
Changing image style using get element by class

Changing image style

According to above discussion.it has been very clear that you can access the elements of the pages using this class.So I would tell you how a image can be accessed through this function and possibility to change the behavior of image using some special arguments.

The code to access the image from the page would be -

Code:
var img_array = document.getElementsByTagName("img");
for (lp_var = 0; lp_var < arr.length; lp_var++) 
 {
   arr[lp_var].style.width = arr[lp_var].style.width ? "" : "74%" ;
 }
The above written code will change the width of the image.
Reply With Quote
  #5  
Old 06-03-2010
Member
 
Join Date: Jan 2008
Posts: 1,515
getelementbyclass with javascript event

The getelementbyclass is specified as the method in the web programming.We can attach it with different elements and also the event handler.

I think,you all would be aware of the event programming through the javascript which uses different events like-onmouseover,onmouseout,onclick,etc.

We can use this method with those events as a demonstration is given -

Code:
<a href=??? onclick=?getElementByClass(?whatever?);?><img src=???></a>
Just include the above code with appropriate information means other arguments in the tag and refresh the browser after saving the changes.
Reply With Quote
  #6  
Old 06-03-2010
Member
 
Join Date: Apr 2008
Posts: 1,948
Example Get Elements By Class Name

This one is an independent example of Get Elements By Class which is able to access the whole elements of the HTML document.

You need to just specify the name of function and pass the BODY argument in the parenthesis of the function,The definition can take this form -


f
Code:
unction getElementsByClassName(classname, node) {
   
      if(!node) node = document.getElementsByTagName("body")[0];
   
      var arr = [];
   
      var reg = new RegExp('\\b' + classname + '\\b');
   
      var Elt = node.getElementsByTagName("*");
   
      for(var lp1=0,j=elt.length; lp1<lp2;lp1++)
   
      if(reg.test(els[lp1].className))a.push(els[lp1]);
   
      return arr;
   
      }
Reply With Quote
Reply

  TechArena Community > Software > Software Development
Tags: , , ,



Thread Tools Search this Thread
Search this Thread:

Advanced Search


Similar Threads for: "javascript get element by class"
Thread Thread Starter Forum Replies Last Post
How to set the value of a form element using Javascript? shivendra Software Development 4 07-02-2010 05:04 AM
How an Array Class is Used in Javascript? PsYcHo 1 Software Development 5 05-02-2010 12:04 AM
Code to scroll to javascript element. sizzla Software Development 2 04-07-2009 10:13 PM
JavaScript - How to create Element Xylina Software Development 3 04-06-2009 05:06 PM
How do I know the width of an element through javascript? Conner Software Development 3 06-04-2009 11:29 AM


All times are GMT +5.5. The time now is 02:10 AM.