如何使用 document.queryselector() 编辑元素的 HTML 属性？

Question

我正在学习 JavaScript 课程，我想知道为什么这段代码不起作用：

        document.querySelector('.message').style.width ='30rem';
        document.querySelector('.message').style.transition='0.3s';

如果我选择 HTML 元素，此方法有效，但不适用于类。为了解决这个问题，我认为如果我通过将样式属性直接添加到元素中来编辑元素的属性会很有用，如下所示：

<div class=".message" style="width=30rem; transition=0.3s;" > </div>

Answer 1

hope this can help, you have to correct class=".message" to class="message"

<div class="message">Some content</div>

<script>
    const customDiv = document.querySelector(".message");
    customDiv.style.cssText = 'width: 30rem; transition: width 0.3s;';
</script>

Answer 2

我们可以将它们组合成一个字符串，然后使用

cssText

属性应用它们，而不是单独设置每个样式属性。

document.querySelector('.message').style.cssText = 'border-radius:10px; width: 30rem; transition:0.3s;';

<div class="message"></div>