0

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.

Aashish Loknath Panigrahi
  • 155
  • 10

1 Answers1

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

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).

Drdilyor
  • 1,250
  • 1
  • 12
  • 30
  • 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. – Aashish Loknath Panigrahi Jun 07 '21 at 19:11
  • 1
    @AashishLoknathPanigrahi no, they all default to 0; also https://stackoverflow.com/q/5913927/13449712 – Drdilyor Jun 07 '21 at 19:13