只执行最后一个setAttribute

Question

我正在尝试为一个表单设置多个属性。我希望表格居中，背景为橙色。但是只执行最后一个属性。因此，在下面的代码中，背景颜色为橙色，但表格不会居中。

这是我的代码：

<!DOCTYPE html>
<html>
 <body>

   <form id="form">
       First Name:<br>
       <input type="text" name="firstname">
         <br>
         Last name:<br>
         <input type="text" name="lastname">
       </form>
    <script>  alert("ahhhhhh");
     var form = document.getElementById("form");
     form.setAttribute("style", "background-color: orange");
     form.style.align = "center";
     form.style.backgroundColor = "orange";


    </script>
 </body>
</html>

谁能告诉我为什么会这样，以及如何在一个元素上设置多个属性？谢谢！

Answer 1

align 不是有效的 CSS 属性。在这种情况下，您需要将 textAlign 或 margin 设置为 0 auto

Answer 2

没有CSSalign属性。这就是为什么您认为代码未执行的原因。您可能正在尝试设置 textAlign 属性.

form.style.textAlign = "center";

请注意，使用 JavaScript 的样式元素是一种不好的做法，因为它会降低代码的可维护性。如果应通过 JavaScript 有条件地应用样式，您可以改为添加和删除 CSS 类。

只执行最后一个setAttribute

Only the last setAttribute is executed

javascript

element

setattribute