0

Как можно поменять стили элементов где есть атрибут data через JS? Данный метод не сработал Нужно именно с атрибутом data менять а не через class/id.

<button class="rNumbers" id="n36" data="red"></button>
<button class="rNumbers" id="n37" data="red"></button>

let test1 = document.querySelectorAll([data="red"]);
function test(){
    test1.style.opacity = 0;
};

1 ответ 1

1

Во-первых Вы создаете функцию, но не где её не вызываете, поэтому она не выполняется, исправим это:

test();

Dо-вторых, пользовательские атрибуты следует писать через data-name:

<button class="rNumbers" id="n36" data-color="red">кнопка</button>

Подробнее про пользовательские атрибуты: https://developer.mozilla.org/ru/docs/Learn/HTML/Howto/Use_data_attributes

В-третьих, чтобы вернуть элементы с data-color='red', нужно заключить это выражение в кавычки:

let test1 = document.querySelectorAll("[data-color='red']");

Ну и самое главное - querySelectorAll возвращает NodeList, поэтому, чтобы применить стили к каждому элементу из этого NodeList, можно воспользоваться методом forEach:

test1.forEach(el => {
    el.style.opacity = 0;
});

Подробнее про querySelectorAll: https://developer.mozilla.org/ru/docs/Web/API/Document/querySelectorAll

Подробнее про forEach: https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

Полный код:

<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <button class="rNumbers" id="n36" data-color="red">кнопка</button>
  <button class="rNumbers" id="n37" data-color="red">кнопка</button>
  <button class="rNumbers" id="n37" data-color="green">кнопка</button>

  <script>
    let test1 = document.querySelectorAll("[data-color='red']");

    function test() {
      test1.forEach(el => {
        el.style.opacity = 0;
      });
    };

    test();
  </script>
</body>

</html>

1
  • Большое спасибо за такое развернутое и хорошее объяснение, вы мне очень помогли!
    – Ximroy
    28 июл 2022 в 6:28

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.