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

  css, flexbox, html, javascript

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.

Source: Ask Javascript Questions

LEAVE A COMMENT