Javascript replace
class name

Question

For A/B testing purposes i'd like to change the class name of an element. I can add Javascript to the A/B testing tool to achieve this. As i'm quite new to javascript, i could use some help.

The current element:

<ul class="products-grid products-grid--max-4-col first last odd">

Must be changed to:

<ul class="products-grid products-grid--max-3-col first last odd">

How can i perform this by using Javascript?

read up about classList https://developer.mozilla.org/en-US/docs/Web/API/Element/classList. document.getElementById(...).classList.remove(...) / classList.add(...) — maracuja-juice, Oct 31 '17 at 08:48
This is introductory level stuff that should be covered by any introductory tutorial to client side JavaScript. Stackoverflow expects [a degree of research](https://meta.stackoverflow.com/q/261592/19068) **before** you ask a question. — Quentin, Oct 31 '17 at 08:49

score 1 · Answer 1 · answered Oct 31 '17 at 09:01

1

use the below code:-

<script>
if (document.getElementsByTagName("ul")[0].classList.contains('products-grid--max-4-col') ){
document.getElementsByTagName("ul")[0].classList.remove('products-grid--max-4-col');
document.getElementsByTagName("ul")[0].classList.add('products-grid--max-3-col');
}
</script>

answered Oct 31 '17 at 09:01

Anup pandey

437
2
9

Thanks! This works for me. – WVD Oct 31 '17 at 09:28
@WVD welcome accept it. – Anup pandey Oct 31 '17 at 09:30
What if the desired `ul` element is not the first one? – evolutionxbox Oct 31 '17 at 09:31
@evolutionxbox according to requirment change the array index like [1].. . – Anup pandey Oct 31 '17 at 09:38
@Anuppandey Consider not encouraging writing brittle code? – evolutionxbox Oct 31 '17 at 09:44

Javascript replace class name

1 Answers1

Javascript replace
class name