Блог

На веб-сайте, для которого я пытаюсь создать тему, у них есть CSS-имя ul.menu li ul, и я хочу изменить его свойство border-top. Я знаю, как это сделать с помощью простых имен CSS, таких как mycssname, но как мне сделать это с точкой в JavaScript?

Я уже пробовал эти:

 document.getElementsByClassName("ul.menu li ul")[0].style.borderTop = "5px solid #fff"
 

 document.getElementsByClassName("ul.menu li ul")[0].style.borderTop = "5px solid #fff"
 

 document.getElementsByClassName("ul")["menu li ul"].style.borderTop = "5px solid #fff"
 

Вот HTML-код:

 <ul class="ddm" style="display: block;">
 

Когда я проверяю его, он показывает изменяемое значение ul.menu li u в инспекторе CSS.

Но все они выдают ошибку неопределенного значения.

Вы не можете использовать селектор CSS с getElementsByClassName() , вы должны определить для него имя класса. итак, вы можете сделать:

document.querySelector("ul.menu li ul").style.borderTop = "5px solid #fff"

Или,

document.querySelectorAll("ul.menu li ul")[0].style.borderTop = "5px solid #fff"

Как упоминалось другими, на самом деле работает следующее.

 document.querySelector('ul.menu li ul').style.borderTop = "5px solid #fff";
 

Тем не менее, сайт в ссылке (https://v3rmillion.net ) имеет два элемента, соответствующие этому селектору. Они видны только при наведении курсора мыши. (Главная страница и разное)

Поэтому нам нужно изменить код, чтобы обновить все элементы, соответствующие селектору:

 let result = [...document.querySelectorAll('ul.menu li ul')].forEach(el => {
     el.style.borderTop = '5px solid #fff';
})
 

В качестве альтернативы, если вы просто хотите обновить второй элемент:

 document.querySelectorAll('ul.menu li ul')[1].style.borderTop = '5px solid #fff';
 

Я думаю, вам следует попробовать добавить свойство класса к элементу вместо использования иерархии.

 <h1 class="app"> Hello world </h1>
document.getElementsByClassName("app").style.borderTop = "5px solid #fff"
 

Вы можете сделать следующее

     const elements = document.getElementsByClassName("ddm");
    elements[0].style.borderTop = "5px solid #fff";

 

Прочитайте документы для document.getElementsByClassName() :

Метод getElementsByClassName интерфейса Document возвращает массивоподобный объект всех дочерних элементов, которые имеют все заданные имена классов.

Имейте в виду, что селекторы CSS читаются справа налево, ваш селектор ожидает что-то вроде этой структуры:

 <ul class="menu">
  <li>
    <ul></ul> <!-- style this element -->
  </li>
</ul
 

Там нет элемента с этими классами. Точнее li , и ul являются даже не классами, а именами тегов HTML.

Использование либо querySelector или querySelectorAll будет более подходящим в зависимости от того, нужен ли вам только первый соответствующий элемент или все соответствующие элементы. Оба этих метода принимают селектор css.

Вы можете поместить селектор в качестве параметра querySelector() метода:

 document.querySelector('ul.menu li ul').style.borderTop = "5px solid #fff";
 

Я вижу, что более одного элемента на вашем сайте соответствует этому селектору, поэтому вам нужно будет установить стили для всех таких элементов:

 document.querySelectorAll('ul.menu li ul').forEach(e=>e.style.borderTop = "5px solid #fff");