Only the last setAttribute is executed

Question

I am trying to set mutliple attributes to a form. I want the form to be centered and the background to be orange. But only the last attribute is executed. So in the code below the background color would be orange but the form would not be centered.

Here is my code:

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

Could someone tell me why this happens and how set mutliple attributes on one element? Thanks!

Don't use `.setAttribute("style"` if there is no reason to do so. — Oriol, Jun 17 '16 at 23:14
A better way to do this is to set a class instead of setting each CSS property directly. — Derek 朕會功夫, Jun 17 '16 at 23:14

score 2 · Accepted Answer · answered Jun 17 '16 at 23:06

2

align is not a valid CSS property. You would need something like textAlign or margin set to 0 auto in this case

answered Jun 17 '16 at 23:06

Cjmarkham

9,484
5
48
81

Ram · Answer 2 · 2016-06-17T23:13:31.847

1

There is no CSS align property. That's why you think the code is not executed. You are probably trying to set the textAlign property.

form.style.textAlign = "center";

Note that styling elements using JavaScript is a bad practice as it makes the code less maintainable. If the styles should be applied conditionally via JavaScript you can add and remove CSS classes instead.

edited Jun 17 '16 at 23:13

answered Jun 17 '16 at 23:07

Ram

143,282
16
168
197

Only the last setAttribute is executed

2 Answers2