javascript - 如何使用 NodeList 修改 CSS？

Question

我刚学 JS/CSS。

这是我正在玩的网站。 http://keysoft.keydesign-themes.com/demo1/

我想使用 JavaScript 将样式“.pricing .pricing-row”的“text-align”属性更改为“left”。

当我在 Chrome 控制台(样式)中将其更改为“text-align:left”时，我看到它使行向左对齐但按钮保持居中。这就是我想要的。

我在控制台中尝试过:document.querySelectorAll('.pricing.pricing-row')但我不明白如何从那里选择 textAlign 属性。它显示了一个 NodeList。

我也试过 document.getElementsByClassName('pricing-row') 但有像 div.pricing-row.button-container 这样的元素。

这些元素是不必要的，因为如果我在循环中使用它们，那么按钮的对齐方式将会受到影响。 所以我的目标是只对齐“定价行”而不影响按钮或其他部分的对齐。

你能告诉我完成这项任务的最有效方法吗？

Answer 1

我不确定如何在纯 JS 中执行此操作，但使用 jQuery 是可能的。

基本上，您的问题是 21 个具有“定价行”类的 div 中的一些也有其他类，您不想选择那些。好吧，实际上这可以帮助您清除它们。

首先 - 为了在 webdev 控制台中使用 jQuery，请执行以下操作:

$===jQuery // should prompt true

现在:

$("div[class='pricing-row'")

将只选择具有该特定类的 div。然后你可以用它们做任何你想做的事。在你的情况下:

$("div[class='pricing-row'").css('text-align', 'left');

另一个对 no 非常有用的选项是 jQuery not() 方法:

$(".pricing-low).not('.button-container .selector').css('text-align', 'left');

这里发生的是首先选择所有具有“pricing-low”类的元素，然后 not() 方法删除具有以下额外类的元素。最后，CSS 操作有效。