更改js中的类样式

Question

我想改变一个类的风格，我知道这是一个非常简单的问题，但我已经尝试过谷歌，但找不到如何做到这一点，这是我的代码，但它不工作，我得到语法错误

$(window).scroll(function() {
  if ($(this).scrollTop()> 620) {
        document.getElementsByClassName("advanced-search").style.position = ¨sticky;¨
    $('.advanced-search').fadeIn();
   } 

Answer 1

返回document.getElementsByClassName和HTMLCollection，这是一个类似数组的对象。它将不具有.style.position属性。由于您已经在使用jQuery，所以只需使用它查询选择器即可。

var $el = $('.advanced-search');
$el.css('position', 'fixed');
$el.fadeIn();

Answer 2

来自MDN，重点是我的：

返回一个类似数组的对象，其中包含具有所有给定类名的所有子元素。

style不是列表的属性；您必须迭代每个元素并应用样式，或者从列表中选择一个元素。

要做到这一点，一种方法是将getElementsByClassName的结果转换为一个数组，并对其进行迭代：

var advSearches = document.getElementsByClassName('advanced-search');

advSearches = Array.prototype.slice.call(advSearches);

advSearches.forEach(function(element) {
    element.style.position = 'sticky';
});

或者，缩写为ES6解构：

[...document.getElementsByClassName('advanced-search')]
    .map(e => e.style.position = 'sticky');

Answer 3

document.getElementsByClassName("advanced-search")是一个数组，你不能完全像你使用的那样直接给所有的数组添加样式！使用for loop或foreach

$(window).scroll(function() {
  if ($(this).scrollTop()> 620) {
        var x = document.getElementsByClassName("advanced-search");
        for(var i=0;i<x.length;i++){
            x[i].style.position = ¨sticky;¨
        }
        $('.advanced-search').fadeIn();
   }
});