What is the reasoning behind using Javascript's setAttribute()?

Question

If I set my attributes individually, they are both correct afterwards:

document.getElementById("FlightPanels").style.height = (PANEL_HEIGHT + 20) + "px";
document.getElementById("FlightPanels").style.width = container_width + "px";

Even if I set width first, then height, they are both correct.

However, if I use setAttribute():

document.getElementById("FlightPanels").setAttribute("style", "height:" + (PANEL_HEIGHT + 00) + "px");
document.getElementById("FlightPanels").setAttribute("style", "width:" + container_width + "px");

If I set height first, width is lost. If I set width first, height is lost.

I've seen solutions that use setAttribute() to set all the desired attributes in a single call, passing a javascript object with multiple attributes to be set.

This to me seems ridiculously more complex and far less readable than just setting the attributes directly individually.

I find the individual setting approach far more easy to read and comprehend if I have a large number of attributes to be set.

My question is, is there some compelling reason, that maybe I am unaware of, that makes setAttribute() the preferred solution? Should I be using setAttribute() for some principled or "best practices" reason? Or is it OK to just set the attributes individually as shown above?

I want the code to not just work, but also be standards compliant.

EDIT: Thanks for the input, folks, but part of my question has to do with why do two subsequent calls to setAttribute() undo each other. Is it because I am misusing it in some way? Or is this the intended design of the function? In that respect, it is not a duplicate of anything because the marked duplicate question does not address this matter. But your input has been helpful. Thanks.

If you've seen code that uses `.setAttribute()` to set the "style" property of an element, you've seen some bad code. — Pointy, Apr 26 '18 at 14:32
`.setAttribute` isn't just for styles. You can use it to set `name`, `disabled`, `data-my-custom-attribute` and whatever you want. — JLe, Apr 26 '18 at 14:33
@JLe yes you *can* use it but there's no point for properties directly exposed on DOM elements. — Pointy, Apr 26 '18 at 14:34
It's setAttribute, not setStyle, there are more use of it than just setting styles. It's best not to use this for setting styles — Huangism, Apr 26 '18 at 14:34

Quentin · Answer 1 · 2018-04-26T19:11:47.700

setAttribute is a generic function for setting any HTML attribute.

Rarely will you want to modify part of an attribute's value.

The style attribute represents a complete CSS rule-set and you will usually want to modify specific parts of it.

setAttribute is not generally useful for setting style.

Thanks for the input, folks, but part of my question has to do with why do two subsequent calls to setAttribute() undo each other.

The first call sets the attribute to something.

The second sets it to something else.

Sets. Not appends. It replaces the old value with the new value.

What is the reasoning behind using Javascript's setAttribute()?

1 Answers1