Question

如何使用纯Javascript将类添加到特定页面上的特定类？我玩了很多不同的代码片段，但无法让任何东西工作。我正在寻找以下内容：

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

Answer 1

您可以使用querySelectorAll加NodeList.forEach()。

此外，您可以查看Element.classList methods。

摘录：

//
// 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>

Answer 2

应该有效：

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

您需要做的是使用您要查找的类作为选择器，在这种情况下它是".existingClass"。

还有很多其他方法可以做到这一点取决于你想要实现的目标。

其他帖子：

jquery change class name

jQuery changing css class to div

how to change class name of an element by jquery

Answer 3

这是最简单的，但是类名的get元素在某些浏览器上会失败，例如旧的。

兼容性可在此处找到 - 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 4

您可以使用getElementsByClassName将属性类设置为新值。在值中，您可以将新类添加到现有类值。此外，var elements = document.getElementsByClassName("existingClass"); elements[0].setAttribute( "class", "existingClass" + " newClass" );返回元素列表，因此您需要正确选择正确的元素。我在下面的第一个索引处使用了元素。

{{1}}

Answer 5

如果你想在Vannila JS中这样做，那么你可以使用下面的代码。它没有使用jQuery。

＆＃13;

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)
  }

＆＃13;

如何根据Javascript中的url将div添加到div？

5 个答案: