How to getElementByClass to a greater then class?

Question

I'm trying to change the color of my header with a button function.

My css:

.navbar-brand > a {
    color: #fff;
}

My js:

function myFunction() {
  document.getElementsByClassName("navbar-brand > a").style.color = "black";
}

The page www.dynamik.systems/typewriter

All help is appreciated!

/ S

document.querySelector(".navbar-brand > a").style.cssText = "color:#000;" — Sercan özen, Nov 26 '19 at 19:37
If you're developing a small site, I suggest opting in for jQuery. You can simply add it via CDN and just use simple CSS selectors to get what you need. Your code would become: $(".navbar-brand > a").css('color', 'black'); — dev-cyprium, Nov 26 '19 at 19:38
Note that `getElementsByClassName` and `querySelectorAll` both return more than one element, so you're going to have to loop over the results. See https://stackoverflow.com/questions/10693845/what-do-queryselectorall-getelementsbyclassname-and-other-getelementsby-method — Heretic Monkey, Nov 26 '19 at 19:41
Thansk all for help! selectorAll is the shit!! :) It worked! — RASALGHUL, Nov 26 '19 at 20:31

score 1 · Accepted Answer · answered Nov 26 '19 at 19:59

1

The easiest solution here is to use document.querySelector. Bear in mind that I am assuming that you only have one element that will match that CSS selector.

document.querySelector('.navbar-brand > a').style.color = 'black';

If it's a case that you're expecting to change multiple elements which match to that CSS selector you've used then you should use document.querySelectorAll.

const uiElements = document.querySelectorAll('.navbar-brand > a');
uiElements.forEach(uiElement => {
  uiElement.style.color = 'black';
});

However, going back to your original question, if you absolutely must use document.getElementsByClassName then the solution (again for multiple elements) would be as follows:

const navbarElements = document.getElementsByClassName('navbar-brand');
navbarElements.forEach(uiElement => {
  uiElement.querySelector('a').style.color = 'black';
});

Hope this helps!

answered Nov 26 '19 at 19:59

AJC24

3,280
2
19
30

Big big thanks! The first solution worked perfect and as you assumed I only had one element to that CSS selector. But I want to do the same to my menu with several elemens and I'm trying your option but that's not seems to be working for me. Have the following code for my menu-links not pressed. ```body:not(.theme-preset-active) #masthead .navbar-nav > li > a``` And this for current ```body:not(.theme-preset-active) #masthead .navbar-nav > li.current_page_item > a``` is it best with your second solution then? – RASALGHUL Nov 26 '19 at 20:30
1

Yeah your not pressed links CSS selector will need to return multiple elements - so use `document.querySelectorAll` in that case. Your current item will likely return one element (since only one can be selected at a time) and so you should be OK using `document.querySelector` for that. – AJC24 Nov 26 '19 at 20:35

How to getElementByClass to a greater then class?

1 Answers1