Question

.JavaScript属性

let friendDiv = document.getElementById("friend");
friendDiv.className = "list";

VS

JavaScript中的setAttribute

let friendDiv = document.getElementById("friend");
friendDiv.setAttribute("class","list");

VS

jQuery中的

.attr

$("#friend").attr("class", "list");

Answer 1

这取决于您要实现的目标或要更改的属性

通常setAttribute版本较长，因此应首选较短的版本。有时，有一个DOM属性比setAttribute更方便，因为它提供了classList之类的方法。但是您可能想要添加一个属性，该属性不像<span my-span-is-awesome></span>那样是DOM的一部分。在这里，除了使用setAttribute之外，您别无选择。

我宁愿在可以避免的地方也不使用jQuery。

Answer 2

如以下类似问题/答案所述：When to use setAttribute vs .attribute= in JavaScript?

setAttribute和getAttribute仅用于非标准HTML属性。

您应该将.attribute用于标准属性。

如果您使用的是JQuery，则始终可以使用attr，因为它可以用于标准和非标准属性。

let test = document.getElementById('test');

console.log('Accessing custom attribute with .attribute:', test.custom);
console.log('Accessing standard attribute with .attribute:', test.className);
console.log('Accessing custom attribute with getAttribute:', test.getAttribute('custom'));
console.log('Accessing standard attribute with getAttribute:', test.getAttribute('class'));
console.log('Accessing non-standard attribute with jquery attr:', $(test).attr('custom'));
console.log('Accessing standard attribute with jquery attr:', $(test).attr('class'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="test" class="myClass" custom="anything">My test</div>

应该使用以下哪一项：.attribute = vs setAttribute vs attr（）？

2 个答案: