检索内联 CSS 样式值答案

【问题标题】：Retrieving an inline CSS style value检索内联 CSS 样式值
【发布时间】：2015-08-10 06:09:20
【问题描述】：

我有一个div，它由模板根据从另一个数据源提取的变量结果自动设置样式。样式值是内联设置的，如下所示：

<div class="view-empty message" style="display: block;">
    There are no active Invoices to display.
</div>

我已经能够在 DOM 中看到这一点并来回切换可见性，但到目前为止还无法使用 Jquery 来检索样式值。我想要做的是根据类搜索 div（因为“view-empty message”类是唯一的）并返回样式属性的值。所以在这种情况下，我想返回"display: block" 或"block"。我已经尝试了许多不同的方法（例如我在网上看到的 .attr() 和 css.），但到目前为止还没有返回我正在寻找的东西。这是我正在使用的最新版本：

var displayValue = document.getElementsByClassName($(".view-empty message"))[0].style;

有什么想法吗？我很感激帮助。

【问题讨论】：

只是一个样式提示，您很少需要将原始 javascript 访问器（getElementById、getElementsByClassName）等与 jQuery 混合使用。这就是 jQuery 的美妙之处：]。很高兴您在达到这一点后停下来伸出手来！
感谢您的提示！ :)

标签： javascript jquery html css

【解决方案1】：

哦，该死的。灯泡。你的选择器是错误的。变化：

$('.view-empty message').attr('style');

到

$('.view-empty.message').attr('style');

在您的选择器中，您尝试获取.view-empty message，它会在具有.view-empty 类的容器内查找名为message 的HTML 元素。相反，您需要为具有两个 CLASSES $('.view-empty.message');的元素指定一个选择器

;]

-- 有用但现在无关紧要...--

您需要指定尝试获取值的属性。注意我是如何在.attr() 方法中指定'style' 属性的。这将检索该属性的值。

$('.view-empty.message').attr('style');

根据.attr() 方法的文档，实际上没有不带参数的方法。 http://api.jquery.com/attr/.

当你用一个值调用方法时，它返回属性的值。

<div class='foo'></div>

$('.foo').attr('class'); // returns "foo"

当您使用两个值调用该方法时，它会使用第一个参数的名称和等于第二个参数的值在元素上设置一个属性。

<div class='foo'></div>

$('.foo').attr('style', 'display: none;');

<div class='foo' style='display: none;'></div>

【讨论】：

感谢您抽出宝贵时间发布此消息！当我使用此方法时，它返回空白 - 只是一个开始和结束引号 "" 。此外，我之前使用的方法返回了一个样式对象......其中列出了所有属性，但它们是空白的。
哦，哇，这个也让我在那里呆了一分钟。我已经弄清楚了你的问题，只是编辑了我的回复。查看我的更新！
谢谢！我肯定用这个更新的代码抓住了正确的 div（我逐步浏览并查看了 - 我现在可以看到文本），所以这是向前迈出的一步。样式属性仍然没有被返回......也许他们在这个模板中设置样式的方式有些奇怪。
当你尝试$('.view-empty.message').attr('class'); 时你有什么收获吗？
另外，您的样式属性是动态设置的（通过其他一些 javascript）还是静态设置（硬编码到 HTML 中）？

【解决方案2】：

也许试试$(".view-empty message").css('display')？你也可以用$(".view-empty message").css('display', 'none').设置显示属性

我假设您没有使用style='display:none' 作为某种标志/状态变量。如果你是，也许尝试将显示属性放在一个类中并使用 jquery 的.addClass() 和.removeClass()？

【讨论】：