Используя собственный JavaScript, измените атрибут title объекта, если у него есть определенный класс CSS

#javascript #html #css #attributes

#javascript #HTML #css #атрибуты

Вопрос:

Итак, используя собственный javascript, как бы я сказал «если у этого объекта есть этот класс css, добавьте это к атрибуту title»

 document.addEventListener("DOMContentLoaded", function(event) { 
    if(element.classlist.contains("current_page_item")||element.classlist.contains("current-page-ancestor")){

    }
});

Это все, что у меня получилось, я пытаюсь придерживаться собственного javascript, чтобы нам не приходилось загружать какие-либо библиотеки и чтобы сайт был максимально минималистичным.

1. element.title =" some more content"

2. Я всегда плохо умею задавать вопросы… итак, я могу выполнить эту часть и иметь. Но элемент не определен. Итак, как мне указать ему, какие элементы проверять? В идеале, я думаю, это были бы просто ссылки или просто ссылки в div с классом «menu-primary-menu-container»

Ответ №1:

Вы можете использовать getElementsByClassName()

 var x = document.getElementsByClassName("current_page_item");

Затем выполните цикл и добавьте title

 x.forEach(function(element){
   element.title = "title";
});

или

 for (var i = 0; i < x.length; i  ) {
    x[i].title ="title";
}

Чтобы ответить на ваш комментарий, примените title к элементу «a», который является дочерним элементом элемента div, имеющего класс «current_page_item»

 for (var i = 0; i < x.length; i  ) {
    var y = x[i].getElementsByTagName("a");
    y[0].title = "title";
}

1. Хм, здесь написано x.forEach — это не функция

2. постоянно добавляя область видимости…. итак, кроме того, что forEach говорит, что это не функция. Как мне применить title к элементу «a», который является дочерним элементом элемента div, имеющего класс «current_page_item»?

3. var y = x[0].getElementsByTagName(‘a’); Затем y[0].title = «заголовок»

Ответ №2:

Аналогично ответу Рохита Шетти, вы также можете использовать querySelector:

 let elements = document.querySelector(".current_page_item");
elements.forEach(function(e) {
  e.title = "title";
);

Ответ №3:

Вы можете использовать getElementsByClassName()

 var x = document.getElementsByClassName("current_page_item");
for(var i=0;i<x.length;i  ){
    x[i].title  = "BLAH";
}

Ответ №4:

Сейчас я не знаю, хорошо ли я понял.

Но давайте попробуем. Сначала найдите элементы.

 const nodes = document.querySelectorAll('.current_page_item, .current_page_item')
// nodes are the elements of one of the classes names

Затем примените имена классов к title.

 function containsOfTheClasses (node) {
    return classNames.some(x => node.classList.contains(x))
}

nodes.forEach(function (node) {
    node.title  = classNames.filter(containsOfTheClasses).join(' ')
})