Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

getElementByClass in a HTML

Posted on 2010-11-10
19
Medium Priority
?
1,851 Views
Last Modified: 2012-05-10
I have a HTML webpage with the 3 classes.-sidebar1 is one class

Ia m trying to do this:
     var Height = document.getElementByClass('sidebar1').offsetHeight;

This is not working.
Can you please let me know how I can get the offset of a Class?

similarly I am trying to use the following function.
document.getElementByClass('sidebar1').style.height  which is also not working
0
Comment
Question by:vkchaitu82
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 6
  • 3
  • +2
19 Comments
 
LVL 58

Expert Comment

by:cyberkiwi
ID: 34108451
getElementsByClassName( name )

This gives you an array that you can work through
0
 

Author Comment

by:vkchaitu82
ID: 34108467
Thankq.
can you please elaborate on this? i am not clear!!!
0
 
LVL 60

Expert Comment

by:HainKurt
ID: 34108481
try

var Height = document.getElementByClass('sidebar1')[0].offsetHeight;
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:vkchaitu82
ID: 34108501
thankq.
is it  document.getElementByClass (or)  document.getElementsByClass??
also I have so many classes (3). so what is this [0] stand for?
0
 
LVL 60

Expert Comment

by:HainKurt
ID: 34108514
I found this function
<div id=d1 class=a width=100>a</div>
<div id=d2 class=b>b</div>
<div id=d3 class=b>b</div>
<div id=d4 class=a width=200>a</div>

<script>
function getElementsByClassName(classname, node)  {
    if(!node) node = document.getElementsByTagName("body")[0];
    var a = [];
    var re = new RegExp('\\b' + classname + '\\b');
    var els = node.getElementsByTagName("*");
    for(var i=0,j=els.length; i<j; i++)
    if(re.test(els[i].className))a.push(els[i]);
    return a;
}

var h1 = getElementsByClassName("a",document)[0].offsetHeight;
var h2 = getElementsByClassName("a",document)[1].offsetHeight;
alert(h1 + " - " + h2);
</script>

Open in new window

0
 
LVL 60

Accepted Solution

by:
HainKurt earned 1500 total points
ID: 34108542
use provided function above and use

var h1 = getElementsByClassName("a",document.body)[0].offsetHeight;
var h2 = getElementsByClassName("a",document.body)[1].offsetHeight;

or better if you know where are these elements, provide the container node as second parameter

var myContainer = document.getElementById("myContainerID");
var h1 = getElementsByClassName("a", myContainer)[0].offsetHeight;
var h2 = getElementsByClassName("a", myContainer)[1].offsetHeight;
0
 

Author Comment

by:vkchaitu82
ID: 34108562
Thanks Hainkut.
I am still not clear with the array/a/Mycontainter?

I think a=sidebar1 (my class name)
what are the other 2?
0
 
LVL 7

Expert Comment

by:wdfdo1986
ID: 34108716
try with this
var arr = getElementsByClassName('sidebar1');
for (var i = 0 ; i < arr.length ; i ++ ){
  var Height = document.getElementsByClassName('sidebar1').height;
 //do what u want to do with height
}
0
 
LVL 60

Expert Comment

by:HainKurt
ID: 34108737
just use the function above with these lines

var h1 = getElementsByClassName("a",document.body)[0].offsetHeight;
var h2 = getElementsByClassName("a",document.body)[1].offsetHeight;

if your elements are say in a div with id=myContainerID

<div id=myContainerID>
...
</div>

then you can use second sample to speed up element searching... here is both usage together
<div id=myContainerID>
<div id=d1 class=a>a</div>
<div id=d2 class=b>b</div>
<div id=d3 class=b>b</div>
<div id=d4 class=a>a</div>
</div>

<script>
function getElementsByClassName(classname, node)  {
    if(!node) node = document.getElementsByTagName("body")[0];
    var a = [];
    var re = new RegExp('\\b' + classname + '\\b');
    var els = node.getElementsByTagName("*");
    for(var i=0,j=els.length; i<j; i++)
    if(re.test(els[i].className))a.push(els[i]);
    return a;
}

var h1 = getElementsByClassName("a",document.body)[0].offsetHeight;
var h2 = getElementsByClassName("a",document.body)[1].offsetHeight;
alert(h1 + " - " + h2);

var myContainer = document.getElementById("myContainerID");
var h1 = getElementsByClassName("a",myContainer)[0].offsetHeight;
var h2 = getElementsByClassName("a",myContainer)[1].offsetHeight;
alert(h1 + " - " + h2);
</script>

Open in new window

0
 

Author Comment

by:vkchaitu82
ID: 34109413
My element is in div = class.

 var Height = document.getElementsByClassName('sidebar1')[0].offsetHeight;
    document.getElementsByClassName('content')[0].style.height = Height + "px" ;

Both worked for me .I did noting else,
The Question I have is :
what does array[0] stand here?..I am really confused.
0
 
LVL 7

Expert Comment

by:wdfdo1986
ID: 34109967
ok
When u say getElementsByClassName it will return an array of objects whose class name is that name u given.
I hope u know that there can be several tags with same classname.
So it will return the array that contains the classname u given.
If u use it only for once then that array will only contain one element.
If u use more there will be more elements in the array.
0
 
LVL 5

Assisted Solution

by:SimonDard
SimonDard earned 500 total points
ID: 34110224
I recommend checking out jQuery for this.

If you have not heard of jQuery before: at it's core it is a relatively small library that gives you easy access to elements by id, class, type etc. making code easier to read and understand.

Your first question in jQuery would be: $(".sidebar1").height();
Changing it is as easy as:  $(".content").css("height",  ($(".sidebar1").height())+"px");

As you can see: no fiddling around with arrays here.
0
 
LVL 60

Assisted Solution

by:HainKurt
HainKurt earned 1500 total points
ID: 34112008
but

document.getElementsByClassName('...)

does not exists, no such functiuon... what browsers are you using?
Thats why I posted the custom function... it returns you an array (a 0 based index of objects)
when it finds one lement, you get it by adding [0] to return value...

var divs =  getElementsByClassName("myDataDiv", document.body);
if (divs.length>0) {
 var div1=divs[0];
...
}
0
 

Author Comment

by:vkchaitu82
ID: 34112095
wdfdo1986- Thanks f the reply.
I am very new to javascript. can you tell me the what are the serveraltags with the given class name?

Is there any restrictions on the Browser to use this API?
As it is java script I think that will not be the case. but want to confirm.
0
 

Author Comment

by:vkchaitu82
ID: 34112120
HainKurt:
I am using crome.
Initially I also taught it is not there. but it worked in Crome/Firefox.

In IE it is not working?
0
 

Author Comment

by:vkchaitu82
ID: 34112151
Looks I am back to the problem.
so here are my questions again.

1) I am very new to javascript. can you tell me the what are the serveraltags with the given class name?

2) the script does not work in IE. should I look into jquery?
0
 
LVL 5

Expert Comment

by:SimonDard
ID: 34113074
1) getElementsByClassName gives you all the elements ('tags') using that class. Remember that several elements can share the same class.

2) jQuery is cross browser compatible, so looking into jQuery will help. Also, since you're new to javascript, using jQuery will make your work easier, although it doesn't hurt to know the underlying principles.
0
 
LVL 60

Assisted Solution

by:HainKurt
HainKurt earned 1500 total points
ID: 34115380
the function I provided before, getElementsByClassName, should work fine in all browsers... why do you say it is not working? I tested it in IE

function getElementsByClassName(classname, node)  {
    if(!node) node = document.getElementsByTagName("body")[0];
    var a = [];
    var re = new RegExp('\\b' + classname + '\\b');
    var els = node.getElementsByTagName("*");
    for(var i=0,j=els.length; i<j; i++)
    if(re.test(els[i].className))a.push(els[i]);
    return a;
}
0
 
LVL 7

Expert Comment

by:wdfdo1986
ID: 34119506
I think I gave u a solution which assist u.
Although selection is urs I am worried about not rating my answer under assisted solution.
0

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

604 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question