Question

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

这是我的代码：

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

有人能告诉我为什么会发生这种情况以及如何在一个元素上设置mutliple属性？谢谢！

Answer 1

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

Answer 2

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

form.style.textAlign = "center";

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

仅执行最后一个setAttribute

2 个答案: