This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 8 years ago.
I am trying to access the width of a div to put in a cookie. This is the div:
<div class="tab_panel" style="width:600px">
It is the only div with this class name. It is not an option to specify a unique id for the div. This is the code I have been using in an event to call it but it gives an error:
document.getElementsByClassName(tab_panel).style.width
I know Firefox supports getElementsByClassName, so what am I doing wrong?
It's a string:
document.getElementsByClassName("tab_panel")[0].style.width
Bye
P.S. It's an array
document.getElementsByClassName("tab_panel") returns a collection of nodes, the first of which is referred to by document.getElementsByClassName("tab_panel")[0].
If the node you are searching does not have an inline style="width:' assignment, an empty string is returned from document.getElementsByClassName("tab_panel")[0].style.width.
Missing quotes:
document.getElementsByClassName('tab_panel').....
You should iterate over all elements like this:
var elms = document.getElementsByClassName('tab_panel');
for(var i = 0 ; i < elms.length; i++)
{
alert(elms[i].style.width);
}
Try saying:
document.getElementsByClassName("tab_panel")
Related
This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 2 years ago.
so hello i am trying to add class that for element that passes all selectors
this is my current code
document.querySelectorAll('.inner p .align_center').parentNode.classList.add('center_text')
which uhh should work, i am trying to translate this jquery code
$(".inner p .align_center").parent().addClass('center_text')
but i get .parentNode is undefined in the console why? i selected child of p with class of .alignt-center and i want to add class to that p element, or is there easier way of doing the same thing? what am i doing wrong
var a = document.querySelectorAll('.inner p .align_center');
for(var i = 0; i < a.length; i++) {
a[i].parentNode.classList.add('center_text');
}
just had to treat querySelectorAll as a array instead of single element
This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 2 years ago.
I'm new to javascript and I got no clue what's not working, i'm just trying to get the background of some h2 with the class "titre" to turn blue. For some reason, if it's a getElementById it works fine but if I use getElementsByClassName it doesn't work and I don't get suggestion after style.
I know I should just use CSS without js to do it but it's a school thing and I need to do it like that.
Thank you.
My js code:
function titre2(){
var titreback = document.getElementsByClassName("titre");
titreback.style.backgroundColor = "blue";
}
my HTML (where my class is):
<section>
<article>
<h2 class="titre" onblur="titre2();">Qu'est-ce que <em>Facebook</em> ?</h2>
I suggest you take a deeper look at Chrome dev tools. (assuming that's what you're using)
Find out how to set a breakpoint to see what exactly you're trying to manipulate.
That or console log your results.
the function .getElementById returns 1 element, while the function getElementsByClassName returns multiple elements!
So yes the above answer holds the key ;D
GL!
getElementsByClassName returns a HTMLCollection you need to loop through them to set the style.
function titre2(){
var titreback = document.getElementsByClassName("titre");
for (let item of titreback) {
item.style.backgroundColor = 'blue';
}
}
This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 5 years ago.
I'm looking at three custom HTML attributes within an "a" tag and I'd like to extract their values into 3 separate javascript variables.
Here's the HTML with the attributes "data-event-category", "data-event-action", and "data-event-label":
'<a data-event-category="Billionaire" data-event-action="SeeMore" data-event-label="Biography" href="xxx" class="ga-track-click billionaires-individual-see-more gotham-medium red-txt">Contact us to see more Biography</a>'
And this is the function I cobbled together, unsuccessfully trying to extract the value of "data-event-category":
`function myFunction3() {
var z = document.getElementByClass(".ga-track-click").getAttribute("data-event-category");
return z;
}`
Here's my fiddle :
https://jsfiddle.net/comicosp/430350g0/#&togetherjs=tGRIiss2gB
Can you please tell me the** correct way to extract the values of the 3 custom HTML attributes**?
** DUPLICATE ISSUE**
I can see how :
What do querySelectorAll, getElementsByClassName and other getElementsBy* methods return? would be similar, but I'm not sure how it applies to my question. I'm very very beginner with javascript.
Change
getElementByClass
to
getElementByClassName
or use
querySelector
This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 7 years ago.
document.getElementById("myId").style.left = 100px;
Is there a SHORT way to use the code above to a class?
Will the code below work?
doucment.getElementsByClassName("myClass").style.left = 100px;
What I wanted to do was to move multiple images to the same place and it should be flexible so that it would work if the user wanted 1, 2, 3 or more images to move to that place.
The getElementsByClassName() function returns a NodeList, so you'll need to iterate over it and apply the style to each element in turn. That's relatively easy to do using forEach, but you need to convert to an Array first:
Array.prototype.slice.call(document.getElementsByClassName("myClass")).forEach(function(elem,index) {
elem.style.left = 100px;
});
Yes, but getElementsByClassName returns an array-like object (an HTMLCollection), so you need to specify the element(s) you want to apply the change to. For example:
document.getElementsByClassName("myClass")[0].style.left = 100px;
Would be applied to the first element with that class. Otherwise you need to loop over the set.
This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 8 years ago.
I've simple javascript to get it's child element with the getElementsByClassName but it's not working:
var parent = document.getElementsByClassName('parent');
var child = parent.getElementsByClassName('child');
child.style.color='red';
I've tried a lot and searched to get it but some answers with for loop I've found but I wanted to do it without loop. How can I do this?
You can get the complete node list in one step
var children = document.querySelectorAll(".parent .child");
But then you'll have to loop over that node list.
If you are really interested in only the first one, then you can do
document.querySelector(".parent .child").style.color = 'red';
Try this:
var parent = document.getElementsByClassName('parent');
for(var i=0;i<parent.length;i++){
var child = parent[i].getElementsByClassName('child');
for(var j=0;j<child.length;j++){
child[j].style.color='red';
}
}
document.getElementsByClassName() return the collection. So you have to apply indexing or looping.
Multiple elements can be members of the same class. That is the point of classes.
In getElementsByClassName the word elements is plural. It returns a NodeList, not a single Element.
You can treat it much like an array. You have to loop over each of the nodes that it returns or assume that it will only return one match and use [0].