如何从 JS 中获取 CSS 值？答案

【问题标题】：How to get CSS value from JS?如何从 JS 中获取 CSS 值？
【发布时间】：2020-12-23 04:23:07
【问题描述】：

我正在做响应式设计并使用@Media 根据屏幕大小设置 CSS。我设置了一个名为

的css值

.dskcell { 显示：无； }

如果媒体很小，则将其设置为无，否则显示：正常。我想知道如何在纯Javascript中获取dskcell的显示值？

我看到 getComputedStyle 但这似乎需要一个 HTML 元素，在某些页面上没有使用 css。 JS中如何知道dskcell的显示值是多少？

编辑：

<ul id="mnu" class="page dskcell">

在 Javascript 中，我需要知道它是隐藏还是显示，所以我想看看 dskcell 的显示值是多少。

【问题讨论】：

并不是说“类的价值是什么”。这些值会根据选择器和媒体查询应用于元素。您只能在特定元素上有意义地评估它们。要知道 Javascript 中的屏幕大小，您根本不需要 CSS；只需检查适当的 Javascript 属性。
如果你分享足够多的代码来证明你的问题，你可以获得有效的帮助，它可以解释为什么 getComputedStyle 不适合你。除非你没有正确使用它。如果没有 .dskcell 那么你不应该得到任何价值。 developer.mozilla.org/en-US/docs/Web/API/Window/…
尝试：document.querySelector('#mnu').style.display;或 document.getElementById('mnu').style.display;您也可以使用 querySelector 调用选择类，只需将“#”交换为“。” .
来自我之前的评论：这就是我的意思：jsfiddle.net/umokv29d 和jsfiddle.net/umokv29d/1 您需要检查默认显示是否已重置。如果它被设置/重置，那么你就有一个可以使用的值。如果不是，则应用默认值（ul 是块，span 是内联，li 是列表项，等等...）
那么您真正想要做什么？弄清楚元素是否显示？在此基础上你想做什么？

标签： javascript html css

【解决方案1】：

这是一种使用纯javascript检查dskcell元素是否显示的方法。如果媒体查询适用（或没有 dskcell 元素），dskcellIsDisplayed 将为假（否则为真）。

document.addEventListener('DOMContentLoaded', () => {
  const elem = document.querySelector('.dskcell');
  const dskcellIsDisplayed = elem && window.getComputedStyle(elem, null).getPropertyValue("display") !== 'none';
  console.log(dskcellIsDisplayed);
});

div {
  border: 1px solid red;
}

body {
  background-color: lightgreen;
}

@media only screen and (max-width: 800px) {
  .dskcell {
    display: none;
  }
  body {
    background-color: lightblue;
  }
}

&lt;div class="dskcell"&gt;&lt;/div&gt;

【讨论】：

@MiscellaneousUser 根据你的问题，你应该已经知道这个方法了……‽
我知道 getComputedStyle 但我无法让它工作。我试图查看 css 而不是元素，这就是我打折命令的原因。最后，我采取了不同的方法，改用了这种方法。

【解决方案2】：

我不确定当你只想改变它时为什么需要这个值......那么通常之前的值是什么并不重要。

if (window.innerWidth > 1200 ) {
    const el = document.querySelector('.el');
    el.style.display = 'none';
} else {
    el.style.display = 'block';
}

或计算：你说不是所有的元素都有类名'.dskcell' 那么，给它们添加另一个类？

const element = document.querySelector('.element')
const style = getComputedStyle(element).display
console.log(style) // expected: block / none

如果您真的需要价值... 作为列表中的最后一件事，因为您知道您在 css 中设置的初始值，您可以创建一个包含组件数据的对象，因为您只想在块和无之间切换，您知道所有可能的值...

【讨论】：