如何使用 JavaScript no jQuery 使用带有数据属性的内联样式

Question

我可以像这样在我的 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>

Answer 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>

Answer 2

您可以简单地使用querySelectorAll和forEach循环将style宽度属性应用于存储在data-width属性中的divs 。

要从每个元素获取data-width ，我们可以使用getAttribute方法。

编辑：您可以在同一个querySelectorAll选择多个元素，如section 、 h1 、 span

现场演示：仅使用 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>