无法在DOMContentLoaded外部获取CSS属性值并用于导出函数的问题

问题本质是DOMContentLoaded是异步触发的：你的代码执行顺序是先声明transitionDuration，添加监听，然后立即执行外部的console.log（此时监听还没触发，变量仍为undefined）；只有当DOM完全加载后，监听回调才会执行并给变量赋值。如果expandScreen在DOM加载完成前被调用，同样会拿到未赋值的变量。

下面是两种可行的解决方案，无需将expandScreen放在监听内部：

方案一：用Promise封装加载逻辑 #

通过Promise确保expandScreen执行时已拿到正确的transitionDuration值：

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

let transitionDuration;
let isExpanded = false;

// 创建Promise等待DOM加载完成并获取过渡时长
const transitionDurationPromise = new Promise((resolve) => {
  // 若DOM已加载完成，直接获取值
  if (document.readyState === 'complete' || document.readyState === 'interactive') {
    transitionDuration = window.getComputedStyle(sceneContainer).getPropertyValue("transition-duration");
    resolve(transitionDuration);
  } else {
    document.addEventListener('DOMContentLoaded', () => {
      transitionDuration = window.getComputedStyle(sceneContainer).getPropertyValue("transition-duration");
      console.log("Inside DOMContentLoaded:", transitionDuration);
      resolve(transitionDuration);
    });
  }
});

export async function expandScreen() {
  // 等待获取到有效时长后再执行逻辑
  const duration = await transitionDurationPromise;
  
  // 这里可以正常使用duration值，示例：
  console.log('过渡时长:', duration);
  // 你的业务逻辑...
}

方案二：使用Getter函数延迟获取 #

每次需要时长时通过函数获取，确保值已加载：

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

let _transitionDuration;
let isExpanded = false;

function getTransitionDuration() {
  // 如果已缓存值，直接返回
  if (_transitionDuration) {
    return Promise.resolve(_transitionDuration);
  }
  
  return new Promise((resolve) => {
    if (document.readyState === 'complete' || document.readyState === 'interactive') {
      _transitionDuration = window.getComputedStyle(sceneContainer).getPropertyValue("transition-duration");
      resolve(_transitionDuration);
    } else {
      document.addEventListener('DOMContentLoaded', () => {
        _transitionDuration = window.getComputedStyle(sceneContainer).getPropertyValue("transition-duration");
        console.log("Inside DOMContentLoaded:", _transitionDuration);
        resolve(_transitionDuration);
      });
    }
  });
}

export async function expandScreen() {
  const duration = await getTransitionDuration();
  // 用duration执行你的逻辑
}

补充说明 #

如果你的脚本是放在HTML的<body>底部（DOM元素之后），也可以直接省略DOMContentLoaded监听，因为此时脚本执行时DOM已加载完成，能直接获取到正确的transition-duration值。但异步方案更通用，适配脚本放在任意位置的情况。

内容的提问来源于stack exchange，提问作者Shachar