javascript - 检索内联 CSS 样式值

Question

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

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

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

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

有什么想法吗？感谢您的帮助。

Answer 1

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

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

到

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

在您的选择器中，您试图获取 .view-empty message，它在类为 .view-empty 的容器内查找名为 message 的 HTML 元素>。相反，您需要为具有两个类 $('.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>