javascript - 通过 vanilla Javascript 更改元素的样式

Question

<a href="" style="right:0px">right</a>

我想把它改成

<a href="" style="left:0px">right</a>

在 jQuery 我可以做到这一点

$('a').attr('style','left:0px');

但是如何在不使用 jquery 的情况下在传统的 javascript 中做到这一点？

Answer 1

var elements = document.getElementsByTagName('a'),
    l = elements.length;

while ( l-- ) elements[l].style.left = '0px';

这是小提琴：http: //jsfiddle.net/236pk/

---

如果您使用的是现代浏览器，则可以使用以下衬里：

document.querySelectorAll('a').forEach(e => e.style.left = '0px');

这是小提琴：http: //jsfiddle.net/236pk/24

Answer 2

JavaScript 答案已经存在，但是您将其标记为 jQuery，同时提到您不想使用 jQuery。也许你只是没有意识到 JavaScript 与 jQuery 一起玩是多么容易，它几乎可以在你使用 JavaScript 的任何地方使用，并且有 0 个不良副作用。所以下面是用 jQuery 来做这件事是多么容易，而且代码更少。

$("a").css({ left: "0px", right: "" })

jsFiddle

我知道您展示了一个 jQuery 示例，但它并不完全正确，因此我猜您认为在 JavaScript 中它会更容易，因为您无法弄清楚 jQuery 正确的方式。只需在样式中包含 right 并将其值设置为空字符串，这将正确设置您的样式。

还有一点，虽然选择的答案显示了一种简单的方法，但它并不能解释你的问题。即a标签已经有了style="right:0px;"。如果你想让这一切都正确，请使用他的公式，但添加一行：

var elements = document.getElementsByTagName('a'),
    l = elements.length;

while ( l-- ) {
    elements[l].style.left = '0px';
    elements[l].style.right= ''; // here in lies the added line, it removes the previously set "right"
}