Как изменить значение z-index в стиле html div с помощью JavaScript/css

Я хочу заменить все значения z-index < 0 на 0, где role="заголовок столбца". Как я могу добиться этого, используя javascript или css.

Токовый выход

<div role = "columnheader" style = "z-index: 1; position: absolute; height: 50px; bottom: 0px; width: 60px; left: 18120px;" class = "jqx-grid-column-header jqx-grid-column-header-bootstrap jqx-widget-header jqx-widget-header-bootstrap">
</div>

<div role = "columnheader" style = "z-index: 0; position: absolute; height: 50px; bottom: 0px; width: 60px; left: 18180px;" class = "jqx-grid-column-header jqx-grid-column-header-bootstrap jqx-widget-header jqx-widget-header-bootstrap">
</div>

<div role = "columnheader" style = "z-index: -1; position: absolute; height: 50px; bottom: 0px; width: 60px; left: 18240px;" class = "jqx-grid-column-header jqx-grid-column-header-bootstrap jqx-widget-header jqx-widget-header-bootstrap">
</div>

<div role = "columnheader" style = "z-index: -2; position: absolute; height: 50px; bottom: 0px; width: 60px; left: 18300px;" class = "jqx-grid-column-header jqx-grid-column-header-bootstrap jqx-widget-header jqx-widget-header-bootstrap">
</div>

Ожидаемый результат

<div role = "columnheader" style = "z-index: 1; position: absolute; height: 50px; bottom: 0px; width: 60px; left: 18120px;" class = "jqx-grid-column-header jqx-grid-column-header-bootstrap jqx-widget-header jqx-widget-header-bootstrap">
</div>

<div role = "columnheader" style = "z-index: 0; position: absolute; height: 50px; bottom: 0px; width: 60px; left: 18180px;" class = "jqx-grid-column-header jqx-grid-column-header-bootstrap jqx-widget-header jqx-widget-header-bootstrap">
</div>

<div role = "columnheader" style = "z-index: 0; position: absolute; height: 50px; bottom: 0px; width: 60px; left: 18240px;" class = "jqx-grid-column-header jqx-grid-column-header-bootstrap jqx-widget-header jqx-widget-header-bootstrap">
</div>

<div role = "columnheader" style = "z-index: 0; position: absolute; height: 50px; bottom: 0px; width: 60px; left: 18300px;" class = "jqx-grid-column-header jqx-grid-column-header-bootstrap jqx-widget-header jqx-widget-header-bootstrap">
</div>
Типы данных JavaScript
Типы данных JavaScript
В JavaScript существует несколько типов данных, включая примитивные типы данных и ссылочные типы данных. Вот краткое объяснение различных типов данных...
CSS Flex: что должен знать каждый разработчик
CSS Flex: что должен знать каждый разработчик
CSS Flex: что должен знать каждый разработчик Модуль flexbox, также известный как гибкий модуль разметки box, помогает эффективно проектировать и...
Введение в раздел &quot;Заголовок&quot; в HTML
Введение в раздел "Заголовок" в HTML
Говорят, что лучшее о человеке можно увидеть только изнутри, и это относится и к веб-страницам HTML! Причина, по которой некоторые веб-страницы не...
Как React Helmet спасает меня при разделении файлов CSS?
Как React Helmet спасает меня при разделении файлов CSS?
Многие новички могут столкнуться с проблемой, когда одна страница с CSS наследует свойства от другой страницы с другим CSS. У меня было много проблем,...
Потяните за рычаг выброса энергососущих проектов
Потяните за рычаг выброса энергососущих проектов
На этой неделе моя команда отменила проект, над которым я работал. Неделя усилий пошла насмарку.
Руководство для начинающих по веб-разработке: HTML, CSS и JavaScript.
Руководство для начинающих по веб-разработке: HTML, CSS и JavaScript.
Добро пожаловать, мои коллеги по интернету, в захватывающий мир веб-разработки! Дорогие мои начинающие, я здесь, чтобы провести вас через основы HTML,...
2
0
75
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Используйте селектор атрибутов и условно измените z-index в цикле:

const elements = document.querySelectorAll('[role = "columnheader"]');
    elements.forEach((el) => {
      if (parseInt(el.style.zIndex) < 0) {
        el.style.zIndex = 0;
      }
    });

Или вы можете использовать селекторы атрибутов в css следующим образом:

[role = "columnheader"][style* = "z-index"][style* = "-"] {
  z-index: 0!important;
}

Вы можете запросить все элементы с помощью команды querySelectorAll, а затем применить z-индекс для каждого элемента внутри цикла forEach

    document.querySelectorAll('[role = "columnheader"]').forEach(function (el){
      if (el.style.zIndex < 0) {
        el.style.zIndex = 0;
      }
    });

Другие вопросы по теме

Кнопка переключения для изменения состояния изображения
Как преобразовать mp3 base64, поступающий из бэкэнда, в воспроизводимый звук в браузере в Javascript/React?
Найти все элементы, у которых нет атрибута data- без использования jQuery
Наложение текста на изображение и изменение цвета перекрывающихся букв по мере уменьшения экрана.
Правило css для флажка игнорируется браузером
Используя только javascript и css: могу ли я позволить пользователю выборочно отображать и скрывать div разных классов с помощью одного раскрывающегося меню?
Соотношение сторон изображения сохраняется в Firefox, Chrome и мобильном Safari, но не в настольном Safari.
В моем коде ничего не происходит, хотя это может быть правильно
Могу ли я получить флажки по идентификатору и переключать классы без повторяющихся классов и функций?
Отправка/получение нового сообщения перемещает меня в верхнюю часть экрана в приложении чата