如何使用 document.queryselector（）编辑元素的 HTML 属性？[已结束]-解网

问：

闭。这个问题是不可重现的，或者是由错别字引起的。它目前不接受答案。

这个问题是由一个错别字或一个无法再重现的问题引起的。虽然类似的问题可能在这里成为主题，但这个问题的解决方式不太可能帮助未来的读者。

上个月关闭。

改进此问题

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

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

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

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

javascript html css dom

评论

5赞 dw_ 10/22/2023

类不应该在 html 中有一个点。应该是。 CSS 选择器是，CSS 选择器是。<div class="message"></div>class.id#

0赞 T.J. Crowder 10/22/2023

^^如果您解决了这个问题，并且您显示的代码在元素存在时运行，则代码应该可以工作。

1赞 T.J. Crowder 10/22/2023

“如果我选择 HTML 元素，此方法有效，但不适用于类。”如果您要询问如何对多个匹配元素执行此操作，请遍历 . 仅返回第一个匹配的元素。有关执行此操作的更多详细信息，请参阅本问题的答案。querySelectorAllquerySelector

0赞 Kaiido 10/23/2023

另一个错别字：在CSS中，你使用not声明一个属性的值，所以你的属性应该是:=stylestyle="width:30rem; transition:0.3s;"

0赞 Kaiido 10/23/2023

和。。。迂腐，是属性的有效值，你会用JS或CSS中的选择器来定位它，这根本不实用，但是......这是允许的。.messageclass".\\.message".\.message

答：

1赞 Sahab 10/22/2023 #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>

评论

0赞 Ecry AMV 10/24/2023

我会试试的！非常感谢

1赞 Afzal K. 10/22/2023 #2

不要单独设置每个样式属性，而是将它们组合成一个字符串，然后使用该属性应用它们。cssText

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

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

1赞 Isagovfx 10/23/2023 #3

您的代码工作正常。你只需要修复你的类的命名

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

这不起作用，因为您的 HTML 中有一个点

下面的代码应该可以很好地工作。

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

评论

0赞 Ecry AMV 10/24/2023

打字时😅是我的错

上一个：根据条件使用打字稿更改 <div> 样式

下一个：寻求专业知识：如何完美地对齐范围滑块的拇指和值显示？