javascript - 纯 JavaScript 中的 Onclick slider - 事件不会更改 CSS 值

Question

我正在尝试用纯 JavaScript 制作某种 slider (我不能使用 jQuery 或其他框架，因为它用于 eBay)。

我有这样的功能:

var slider_moves = 0;
var imagecount = document.querySelectorAll(".slides_gsc > img").length;
var slide = document.getElementsByClassName('slider_img_width').offsetWidth;

    function slideLeft(){
        if(slider_moves < imagecount -1){
            document.getElementsByClassName("slides_gsc").style.right +=slide; //for me this is not working
            slider_moves++;
        }
    };

为什么它不起作用？我不能使用 += 或变量来更改 CSS 值吗？

Answer 1

有几个问题。正如其他答案中所指出的，document.getElementsByClassName() 函数将返回一个节点列表，您需要对其进行迭代。此外，right 属性通常包含一个单位(除非它的值类似于 inherit 或 auto)。假设您正在使用像素(因为您正在为 slide 分配像素值)，您可以执行如下操作:

 var slide = document.getElementsByClassName('slider_img_width')[0].offsetWidth;

然后

 var elements = document.getElementsByClassName("slides_gsc"); 
 for(var i=0;i<elements.length;i++){
     slider_moves++;
     elements[i].style.right = (slide*slider_moves)+"px";
 }