如何使用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');

另一個非常有用的選擇是jQuery not（）方法：

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

此處發生的情況是，首先選擇了所有具有“ pricing-low”類的元素，然后not（）方法刪除具有以下額外類的元素。 最終，css操作成功了。