javascript - jQuery `prop` 在 FireFox 中无法在详细信息的 `open` 属性上工作

Question

我想修复 Firefox 中的 detail-html-element 行为。

所以我自己切换 open 属性:

$('summary').on('click', function () {
    var details = $(this).parent();  
    $('details').prop('open', !details.attr('open'));
});

DEMO

我使用 prop 因为 open 是属性而不是属性，对吧？!

无论如何，这在 Firefox 中不起作用，但如果我将 prop 更改为 attr 它会起作用

$('details').attr('open', !details.attr('open'));  

有人可以向我解释我哪里出错了吗？谢谢!

Answer 1

您使用的 css 标识了一个属性。这就是为什么更改属性会导致 css 更改而设置属性不会。

I use prop because open is a property and not an attribute, right ?!

好吧，它可以是任何一种，这取决于你如何定义它。同样，css 指的是属性。

有several long answers解释差异以及在何处使用它们。

一言以蔽之

属性 是对 HTML 元素 的设置，它将某些数据或行为赋予元素。它主要与负载相关，帮助我们正确呈现 HTML，听到这可能是您使用 prop 的原因。

属性 是DOM 节点 的一个特征，告诉我们它的当前状态是foo。有特定的属性附加到特定的节点类型，一些是标准的，一些是浏览器设计的。由于它是 DOM 的一部分，因此该属性在 DOM 操作(又名 Javascript)中与我们同在。