0

If i have the library materialize and an element "h1", how do i change only its background color "black" to "white" using javascript? For example using a button.

<h1 class="black red-text">Test</h1>
Static Codəx
  • 13
  • 5
  • 2
    Hi Quak, we'd need to see your attempt so far. You won't learn anything if we just give you the answer! [This question](https://stackoverflow.com/questions/15241915/how-to-change-css-property-using-javascript) might help you though. – Spoon May 04 '20 at 16:03
  • @TheBlacksmith Sorry, i will keep that in mind for the further posts. You're right I won't learn anything by getting the straight answer. – Static Codəx May 04 '20 at 16:08

5 Answers5

3

Give the element an id:

<h1 id="test" class="black red-text">Test</h1>

Then you can select it like the following:

var el = document.getElementById('test');

You can then just remove the class black with this code: 

el.classList.remove('black');

And append the new class:

el.classList.add('white');
Philip F.
  • 1,167
  • 1
  • 18
  • 33
2

Create a function and a white class. Inside the function use document.getElementsByClassName . Since document.getElementsByClassName is a collection so you need to use index like [0] to access it

function changeColor() {
  document.getElementsByClassName("black")[0].classList.add('white')

}
.white {
  background: white !important;
}

.black {
  background: black;
}

.red-text {
  color: red;
}
<h1 class="black red-text">Test</h1>
<button onclick='changeColor()'>Change Color</button>
brk
  • 48,835
  • 10
  • 56
  • 78
2

Here is the answer.

Select the element using document. getElementById

and on button click

You can use title.classList.toggle("white"); to toggle given class.

const button = document.getElementById('btn');
const title = document.getElementById('title');

btn.addEventListener('click', () => {
  title.classList.toggle("white");
});
.red-text {
  color: red;
}

.black {
  background-color: #000;
}

.white {
  background-color: #fff;
}
<h1 id="title" class="black red-text">Test</h1>
<button id="btn">Change Bg</button>
Varit J Patel
  • 3,497
  • 1
  • 13
  • 21
1

One approach that keeps things neat and tidy in terms of Materialize conventions could be to add or remove classnames, and thus triggering pre-existing styles. Note, you may need a more specific selector if you have multiple elements that share the class:

document.querySelector('h1.black').classList.add('white');

Materialize already has a vast array of colour classes so no need to create new ones.

Codepen here:

And just for clarification:

document.querySelector('h1.black') - this finds the element with a matching class. You could also use ID to be more specific, while .classList retrieves all the classes applied to that element (in this case .black and .red-text) and .add('white') - well, that adds the class you state in the brackets.

Sean Doherty
  • 2,273
  • 1
  • 13
  • 20
1

Hope this resolves your problem. just check the condition whether the class already exist if not add it. 

let h1 = document.querySelector(".red-text");
let btn = document.querySelector("#btn");


function changeColor(){
    if(h1.classList.contains("black")){
      h1.classList.remove("black");
      h1.classList.add("white"); 
    }else{
         h1.classList.add("black");
      h1.classList.remove("white"); 
    }
}

btn.addEventListener("click", changeColor);
.black{
  background: black;
  color: red
}

.white{
  background: white;
}
<h1 class="black red-text">Test</h1>

<button id="btn">Change Color</button>
MD M Nauman
  • 421
  • 4
  • 10