Как я могу использовать встроенный стиль с атрибутом данных, используя JavaScript без jQuery

#javascript #html #css

#javascript #HTML #css

Вопрос:

Я могу использовать в своем HTML-файле вот так

 <div data-width="250px"></div>
<div data-width="calc(100% - 300px);"></div>

Мне нужно вывести вот так

 <div data-width="250px" style="width:250px"></div>
<div data-width="calc(100% - 300px);" style="width:calc(100% - 300px);"></div>

1. итак, вы хотите захватить все, что находится внутри ширины данных, и применить это к встроенному стилю, используя обычный javascript? и не проще ли просто добавить это встроенным с самого начала или это не вариант?

2. Не могли бы вы принять мой ответ , щелкнув серую галочку в моем ответе. Вы можете принять мой ответ таким образом, если я действительно помог вам.

Ответ №1:

вы можете использовать следующее

 <script>
    document.getElementsByTagName("div")[0].setAttribute("data-width","250px");
    document.getElementsByTagName("div")[0].setAttribute("style","width:250px");
    document.getElementsByTagName("div")[1].setAttribute("data-width","calc(100% - 300px)");
    document.getElementsByTagName("div")[1].setAttribute("style","width:calc(100% - 300px);");
</script>

Ответ №2:

Вы можете просто использовать querySelectorAll вместе с циклом forEach, чтобы применить свойство style width к вашему, divs которые хранятся в data-width атрибуте.

Чтобы получить data-width из каждого элемента, мы можем использовать метод getAttribute.

Редактировать: вы можете выбрать несколько элементов, таких как section , h1 , span , в одном и том же querySelectorAll

Живая демонстрация: с использованием только JavaScript

 let getDivs = document.querySelectorAll('div, h1, section')

getDivs.forEach(function(div) {
  let data = div.getAttribute('data-width')
  div.style.width = data
})

 <div data-width="250px">1</div>
<div data-width="calc(100% - 300px)">2</div>
<h1 data-width="210px">3</h1>
<section data-width="150px">4</section>

1. Да, большое спасибо за ваш ответ. Но можно подумать, что если я могу использовать его для любого типа элементов, таких как (span, section, div, h1, article и т.д.), Это означает, что я могу использовать его в любое время в любом месте, любые элементы не // применяются ко всем разделам, нужно применять любые элементы, когда мне нужно, но как??

2. @AbdulKhalik да, это правильно, вы можете добавить span h1 и все остальные, из которых вы хотите эту ширину данных, в querySelectorAll (‘div, span’) таким образом, разделив запятыми.