Question

我想改变一个类的风格，我知道这是一个非常简单的问题，但已经尝试了google并且无法找到如何做到这一点，这是我的代码，但它不起作用我得到语法错误

$(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();
   }
});

在js中更改类样式

3 个答案: