如何使用 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>