Wie Klasse zu Div je nach URL in Javascript hinzufügen?

Question

Wie füge ich eine Klasse zu einer bestimmten Klasse auf einer bestimmten Seite mit reinem Javascript? Ich habe mit einer Reihe verschiedener Code-Snippets herumgespielt, aber es gelingt mir nicht, etwas zum Laufen zu bringen. Ich bin auf der Suche nach so etwas wie die folgenden:

<script> 
    if (window.location.href == 'http://specific-page.com') { 
     $(somecode).find('existingClass').addClass('newClass'); 
    }; 
</script> 

Answer 1

Es sollte funktionieren:

<script> 
    if (window.location.href == 'http://specific-page.com') { 
    $('.existingClass').addClass('newClass'); 
    }; 
</script> 

Was Sie tun müssen, ist die Klasse verwenden Sie als Selektor suchen, ist es in diesem Fall ist ".existingClass".

Es gibt viele andere Möglichkeiten, dies zu tun, je nachdem, was Sie versuchen zu erreichen.

Andere Beitrag:

jquery change class name

jQuery changing css class to div

how to change class name of an element by jquery

Answer 2

dies ist die einfachste, aber bekommen Elemente von Klassenname wird wie ältere dh

Kompatibilität auf einigen Browsern fehlschlagen kann hier gefunden - https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName#Browser_compatibility

// JavaScript Document 

window.onload = init; 
var divsWithClass = null; 


function init() { 
    if (window.location.href.indexOf("some value you care about") >= 0) { 
     this.divsWithClass = document.getElementsByClassName("Some Class Name"); 
     var index = 0; 
     while (index < divsWithClass.length) { 
      divsWithClass[index].className += " newClass"; 
      index++; 
     } 
    } 
    console.log(divsWithClass); 
} 

Answer 3

können Sie die setAttribute verwenden, um die AttributKlasse auf einen neuen Wert zu setzen. In diesem Wert können Sie die neue Klasse zum vorhandenen Klassenwert hinzufügen. Auch die getElementsByClassName gibt die Liste der Elemente zurück, so dass Sie das richtige Element entsprechend auswählen müssen. Ich verwende das Element beim ersten Index unten.

var elements = document.getElementsByClassName("existingClass"); 
elements[0].setAttribute("class", "existingClass" + " newClass"); 

Answer 4

Wenn Sie dies in Vannila JS tun möchten, dann können Sie den Code von unten verwenden. Es verwendet jQuery nicht.

if (window.location.href == 'http://specific-page.com') { 
 
    var el = document.getElementsByClassName("currentClass")[0]; 
 
    var newClass = el.getAttribute("class"); 
 
    newClass += " myNewClass"; 
 
    el.setAttribute("class", newClass) 
 
    console.log(el) 
 
    }

Answer 5

können Sie querySelectorAll Plus NodeList.forEach() verwenden.

Darüber hinaus können Sie einen Blick auf die Element.classList methods werfen.

Das Snippet:

// 
 
// For test purposes only 
 
// 
 
window.location.href1 = 'http://specific-page.com'; 
 

 

 
if (window.location.href1 == 'http://specific-page.com') { 
 
    document.querySelectorAll('#myDiv .existingClass').forEach(function(ele, idx) { 
 
    ele.classList.add('newClass'); 
 
    }); 
 
};

.existingClass { 
 
    height: 30px; 
 
    background-color: red; 
 
} 
 
.newClass { 
 
    border-style: dotted; 
 
}

<div id="myDiv"> 
 
    <p class="existingClass">Thbis is a sample string</p> 
 
</div>