How is it possible to retrieve the flex-direction property value of a div using JavaScript?

While attempting to troubleshoot this issue using Windows Chrome 59, I utilized devtools to examine the properties.

let element = document.getElementById("divId");

Upon checking the value of the element, I noticed that the object structure displayed:

>style:CSSStyleDeclaration

Further inspecting the style property revealed a value for flexDirection: "" (empty). Despite knowing that my CSS has defined flex-direction as column:

flex-direction: column;

Is it not feasible to access this set value from my program? It is crucial for me to observe this change from flex-direction: row in order to adjust my JavaScript code's resizing logic accordingly.

javascriptcssflexbox

Answer №1

To retrieve this information, you can utilize the window.getComputedStyle() method. This function will give you a CSSStyleDeclaration object with the relevant property values which can be accessed either by using the getPropertyValue() method or directly querying the property.

const el = document.getElementById("divId");

const style = window.getComputedStyle(el);

console.log(style.getPropertyValue('flex-direction')); // using the method

console.log(style.flexDirection); // accessing the property
#divId {
  display: flex;
  flex-direction: column;
}
<div id="divId"></div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

CSS - Ignoring Padding Causes Unexpected White Space to Appear

I am encountering a simple error, and the following address will direct you to where the issue can be seen. Why is certain parts of the header appearing white instead of the light shade of green it is set to be? It should be positioned right at the top un ...

css

Modifying the Redux state using an array with prototypes

In my React application, I am utilizing Redux along with the ChartJS library to create charts. Occasionally, when I extract an array from the global Redux state, it appears in this format: ejeY: Array(7) 0: 43783 1: 85001 2: 100960 3: 752 ...

javascriptreactjsredux

What is the best way to pass a function along with its state to utilize useContext in React

Currently attempting to grasp the concept of using react hooks. I have implemented createContext and am looking to pass both state and a function to other components, but could use some guidance on how to achieve this. I'm also questioning if it is ev ...

javascriptreactjsreact-hooks

Divided screen showcasing one movable panel

I am currently working on a design where I have a container with a specified maximum height. Inside this container, there are two separate divs. One of these divs (the footer) has a fixed height of 55px, while the other is a scrollable div that adjusts its ...

htmlcss

There are three checkboxes, one of which is independent of the others and requires jQuery to not consider it part of the collection

Initially, I crafted a query that perfectly met the business requirement until there was a change of heart. Uncheck checkbox if checked with jquery The implementation of this code was flawless $('input[type="checkbox"]').on('change' ...

javascriptjqueryhtmlcheckbox

What is the purpose of including an es directory in certain npm packages?

Why do developers sometimes have duplicated code in an es folder within libraries? Here are a few examples: https://i.stack.imgur.com/BWF6H.png https://i.stack.imgur.com/3giNC.png ...

javascriptnpm

Having issues with AngularJS where ng-table/ng-repeat rows are failing to load properly

I've been following a tutorial on using ng-Table, which can be found Here. When I download the example from Git, it loads without any issues. However, when I try to replicate even the simplest example myself, the column headers and filters load but th ...

javascripthtmlangularjsangularjs-ng-repeatngtable

Transferring time between functions in Vue.js: A journey from one function to another

Struggling to pass the value from checkMp3SizeAndDuration method function to data() {return { time: '' } } Check out the code snippet below: data () { return { time: '' } }, methods: { checkMp3SizeAndDuration ...

javascriptfunctionvue.jsmethods

Obtain the following image with every click

I have a div with images inside. I created two arrows (previous, next) within a larger div using the src of one of the images as the background URL for each arrow. My goal is to make the next arrow change the large image to the src of the following image w ...

javascriptphpjqueryhtmlcss

What is the maximum number of groupings that can be created from a set of numbers within a

I'm trying to figure out how to handle a specific task, but I'm running into some obstacles. When adding numbers to clusters, a number is considered to belong to a cluster if its distance to at least one existing number in the cluster is within a ...

javascripttypescript

Angulajs: The correct way to simulate a Promise received from $http

Seeking guidance after struggling with unit testing an angular service, specifically the failed part of a promise. (function () { angular.module('testable') .factory('myService', ["$http", "$q", function ($http, $q) { retur ...

javascriptangularjsunit-testingjasmineangular-promise

Make sure to declare rest parameters first when using Typescript

I am dealing with a function that takes in multiple string arguments and one final argument of a complex type, which is called Expression. This particular code looks like this in JavaScript: function layerProp(...args) { const fields = args.slice(0, -1) ...

javascriptarraystypescriptrest-parameters

Ways to switch sidebar menu using only CSS?

How do I create a BS4 sidebar menu that toggles on click and replaces an icon? See the code below: .toggle { display: none; } .menu-head label { color: black; cursor: pointer; } .container { overflow: hidden; display: inline-block; } .si ...

htmlcssbootstrap-4sidebar

The jQuery element selection feature is not functioning

Within my HTML file, there lies a table with an empty tbody that is dynamically filled by jQuery once the document is fully loaded. The content of the table body is generated using a PHP script, where jQuery fetches the data via a simple GET request. Belo ...

phpjavascriptjqueryhtmlajax

Is it possible to call a function directly from useEffect?

Code VersionA: useEffect(() => doRequest(), []); Code VersionB: useEffect(() => { doRequest(); }, []); I used to believe that both versions were the same, with VersionA being a shortcut and VersionB allowing for multiple commands within the inlin ...

javascriptreactjsreact-hooksnext.js

Exploring JavaScript Unit Testing: Essential dependencies for testing with Karma, jasmine, and bootstrap

After creating an application using AngularJS and additional tools based on bootstrap, I am now facing the challenge of testing everything. However, there seems to be a problem with Karma and Jasmine as an exception is thrown when running the tests. The i ...

javascriptangularjstwitter-bootstrapjasminekarma-runner

What is causing the recurring failure of file input changes to take effect?

Here is the code snippet I'm working with: <input type="file" #fileInput ng2FileSelect [uploader]="uploader" (onFileSelected)="onFileSelected($event)" /> Along with the handler function: public onFileSelected(e: Fi ...

javascriptangular

The scrollable dialogue disrupts the background's ability to flex and grow

My page layout is pretty simple: <main> <header>Header</header> <section>Content</section> <footer>Footer</footer> </main> <dialog>Dialog</dialog> In terms of CSS, here's how it ...

htmlcssmodal-dialogflexbox

Ways to modify the gap between buttons using CSS

I am faced with a design challenge on my home page. I want to add some spacing between the buttons so they are not too close to each other, but for some reason margin-top and margin-bottom properties are not working as expected. Can you help me figure out ...

htmlcss

Determine the width of a div by utilizing SASS and following a series of incremental steps

Let's discuss the current scenario: I have a parent div that consists of multiple child elements which vary in number. (2, 3, 4) The goal is to determine the appropriate width for each step element dynamically: For 2 steps: 50% For 3 steps: 33.3% ...

csssass