• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2121
  • Last Modified:

getElementByClass in a HTML

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
vkchaitu82
Asked:
vkchaitu82
  • 7
  • 6
  • 3
  • +2
4 Solutions
 
cyberkiwiCommented:
getElementsByClassName( name )

This gives you an array that you can work through
0
 
vkchaitu82Author Commented:
Thankq.
can you please elaborate on this? i am not clear!!!
0
 
HainKurtSr. System AnalystCommented:
try

var Height = document.getElementByClass('sidebar1')[0].offsetHeight;
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
vkchaitu82Author Commented:
thankq.
is it  document.getElementByClass (or)  document.getElementsByClass??
also I have so many classes (3). so what is this [0] stand for?
0
 
HainKurtSr. System AnalystCommented:
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
 
HainKurtSr. System AnalystCommented:
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
 
vkchaitu82Author Commented:
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
 
wdfdo1986Commented:
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
 
HainKurtSr. System AnalystCommented:
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
 
vkchaitu82Author Commented:
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
 
wdfdo1986Commented:
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
 
SimonDardCommented:
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
 
HainKurtSr. System AnalystCommented:
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
 
vkchaitu82Author Commented:
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
 
vkchaitu82Author Commented:
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
 
vkchaitu82Author Commented:
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
 
SimonDardCommented:
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
 
HainKurtSr. System AnalystCommented:
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
 
wdfdo1986Commented:
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

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

  • 7
  • 6
  • 3
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now