CSS 在主样式表中设置时，myDiv.style.display 返回为空

在本文中，我们将介绍在主样式表中设置CSS属性时，当使用myDiv.style.display时返回为空的情况，并提供相应的解决方案。

阅读更多：CSS 教程

问题描述

经常情况下，我们会在CSS样式表中定义元素的属性，包括display属性。然而，有时候当我们尝试在JavaScript中使用myDiv.style.display来获取元素的display属性时，却返回了一个空白值。这个问题的原因是CSS样式表和JavaScript代码之间缺乏同步。这通常发生在以下情况下：
– CSS样式表中使用了!important修饰符来强制覆盖元素的display属性；
– JavaScript代码在DOM加载之前就执行；
– JavaScript代码在CSS样式表之前加载。

解决方案 1：使用getComputedStyle方法

getComputedStyle方法是一个JavaScript方法，可以获取所选元素的样式属性。这个方法会返回一个只读的CSSStyleDeclaration对象，其中包含元素的实际计算样式。即使样式是通过CSS样式表中设置的，并且用了!important修饰符，使用getComputedStyle方法仍然可以正确返回样式的值。

以下是一个使用getComputedStyle方法的示例：

var myDiv = document.getElementById("myDiv");
var computedStyle = window.getComputedStyle(myDiv);
var displayValue = computedStyle.getPropertyValue("display");
console.log(displayValue);

解决方案 2：使用window.onload事件

如果JavaScript代码在DOM加载之前执行，那么尝试获取元素的display属性可能会返回空白。为了确保JavaScript代码在DOM加载之后执行，可以使用window.onload事件。当整个页面及其相关资源都加载完成后，window.onload事件会被触发。

以下是一个使用window.onload事件的示例：

window.onload = function() {
    var myDiv = document.getElementById("myDiv");
    var displayValue = myDiv.style.display;
    console.log(displayValue);
};

解决方案 3：在CSS样式表之后加载JavaScript代码

如果JavaScript代码在CSS样式表之前加载，尝试获取元素的display属性可能会返回空白。为了解决这个问题，可以在CSS样式表之后加载JavaScript代码。确保JavaScript代码在CSS样式表之后加载可以保证元素的样式已经被正确渲染。

以下是一个在CSS样式表之后加载JavaScript代码的示例：

<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>

总结

当在主样式表中设置CSS属性时，当使用myDiv.style.display时返回为空的情况可以通过以下解决方案解决：
1. 使用getComputedStyle方法获取元素的计算样式；
2. 使用window.onload事件确保JavaScript代码在DOM加载之后执行；
3. 在CSS样式表之后加载JavaScript代码。

通过采用这些解决方案，我们可以正确获取元素的display属性并处理相关的逻辑。