Question

在 js 中更改类样式

2017-10-12

93

javascript html css

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

$(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 ，重点是我的：

Returns an array-like object of all child elements which have all of the given class names.

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