javascript - 如何操作像 (class1+class2) 这样的类

Question

我从来没有像 .class1 + .class2{} 这样的类声明。我需要使用 Js 操作 padding-top 属性。

CSS

.sticky + .content {
  padding-top: 150px;  
}

这是我在 Js 中尝试的。我想让 padding top -150px。我需要能够动态地改变它。它不起作用。我的错误在哪里？

JS

var myElements = document.querySelectorAll(".content"+".sticky");
  for (var i = 0; i < myElements.length; i++) {
    myElements[i].style.paddingTop = -150 +"px";;
    myElements[i].style.sticky = -150 +"px";;
}

Answer 1

CSS 中的a + b 选择器意味着元素b 在HTML DOM 中紧跟在元素a 之后。如果这确实是您想要的，那么您的 JS 行中有错误:

var myElements = document.querySelectorAll(".content"+".sticky");

".content"+".sticky" 的计算结果为 ".content.sticky"，这意味着一个元素应该同时具有两个类 。内容和.sticky。

尝试使用这个:

var myElements = document.querySelectorAll(".content + .sticky");

此外，CSS 中的加号选择器不可交换，因此 .content + .sticky(粘性元素后面的内容元素)和 .sticky + .content(粘性元素内容元素之后的元素)是不同的选择器。确保您在 CSS 和 JS 中使用相同的选择器。

---

但是，如果您想要匹配具有 .content 和 .sticky 类的单个元素，那么您的错误出在 CSS 中。

在这种情况下，您需要将 .sticky + .content { ... } 更改为 .sticky.content { ... }

---

这行也是无效的:

myElements[i].style.sticky = -150 +"px";;

CSS3 中没有sticky 属性。

也许您想向元素添加一个 sticky 类？这可以像这样完成:

myElements[i].classList.add('sticky');