Why does window.getComputedStyle(element).getPropertyValue("order") doesn't returns order of a flexbox element?

Question

From MDN Web Docs: "window.getComputedStyle() method returns an object containing the values of all CSS properties of an element, after applying active stylesheets and resolving any basic computation those values may contain."

Window.getComputedStyle() returns a CSSStyleDeclaration object which contains key-value pairs containing names of all the CSS properties. To get the resolved value of a particular CSS property, getPropertyValue("property-name") can be used. But, window.getComputedStyle(document.querySelector(".box1")).getPropertyValue("order") is returning the order of element w/ class .box1 in the flexbox as "0". Infact, it's returning the order of every element inside flexbox as "0".

Link to JS Fiddle: https://jsfiddle.net/asxyzp/h6b3j5dL/

Additional context: I was trying to add tooltip to my project (https://flexgrid.asxyzp.repl.co/ref?platform=so), using tippy.js which creates a tooltip for every flexbox element using tippy('.box1',{content:``CLASS: .box1, ORDER : ${window.getComputedStyle(document.querySelector(".box1")).getPropertyValue("order")}``}); so that it would display the order of the flexbox element dynamically, even when changes are made, but it didn't work, so I tried to do it in fiddle, but even there I was getting the order for elements as 0.

Drdilyor · Accepted Answer · 2021-06-07 18:39:47Z

1

You haven't set order css rule on the element,

Try adding:

.box3 { order: 1; }

or:

.box1 { order: 1 } .box2 { order: 2 } .box3 { order: 3 } .box4 { order: 4 }

Fiddle

Order property is 0 by default
when there are multiple flex children
with the same order
they are displayed by their order in the DOM (or HTML).

answered Jun 7, 2021 at 18:39

Drdilyor

1,4162 gold badges17 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Aashish Loknath Panigrahi Over a year ago

Question: When we do "display: flex;" for the container then aren't all the items, assigned an order w/ increasing value (e.g. 1,2,3,4)? I thought that this happens by default for the flexbox container.

Drdilyor Over a year ago

@AashishLoknathPanigrahi no, they all default to 0; also stackoverflow.com/q/5913927/13449712

Collectives™ on Stack Overflow

Why does window.getComputedStyle(element).getPropertyValue("order") doesn't returns order of a flexbox element?

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related