Пытаясь получить доступ к значению атрибута CSS в JS, невозможно использовать его вне события DOMContentLoaded. ⇐ CSS

[Anonymous]

Я пытаюсь получить доступ к свойству продолжительности перехода элемента моей сцены. Проблема в том, что при попытке получить его без прослушивателя событий DOMContentLoaded он возвращает 0 или пустую строку. При использовании прослушивателя событий я получаю правильное значение, но не могу присвоить его внешней переменной, которая мне нужна. Что может быть причиной этого?
Помните, что мне нужно использовать это значение в функции экспорта, поэтому его нельзя записать внутри прослушивателя событий.

Код: Выделить всё

const sceneContainer = document.getElementById('scene-container');
const canvas = document.getElementById("three-canvas");

let transitionDuration;
let isExpanded = false;

document.addEventListener('DOMContentLoaded', function() {
transitionDuration = window.getComputedStyle(sceneContainer).getPropertyValue("transition-duration");
//returns 'Inside DOMContentLoaded: | 0.5s'
console.log("Inside DOMContentLoaded:", transitionDuration);
});

//returns undefined
console.log(transitionDuration)

.
.
.
export function expandScreen() {...}

Я пробовал много разных вещей, и когда наконец увидел правильное значение, я не смог получить к нему доступ извне.


Подробнее здесь: https://stackoverflow.com/questions/787 ... mcontentlo