纯 JavaScript 中的 Onclick 滑块 - 事件不会更改 CSS 值

Question

我正在尝试在纯 JavaScript 中制作某种滑块（我不能使用 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

getElementsByClassName("slides_gsc")

将 return 一个你必须循环的数组，如果你确定只有 1 个元素 class 使用

getElementsByClassName("slides_gsc")[0]

或在元素上使用 Id。如果有超过 1 个元素使用

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

Answer 2

有几个问题。正如其他答案中指出的那样， document.getElementsByClassName() 函数将 return 一个节点列表，您需要对其进行迭代。此外，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";
 }

Answer 3

根据 icke's 的回答，我完成了这样的代码并且它正在运行：

var slider_moves = 0;
var imagecount = document.querySelectorAll(".slides_gsc img").length;
var slide = document.getElementsByClassName('slider_img_gsc')[0].offsetWidth;

    function slideLeft(){
        if(slider_moves < imagecount -1){
            slider_moves++;
            document.getElementsByClassName("slides_gsc")[0].style.right = (slide*slider_moves)+"px";
        }
    };

当然是调用者：

<div class="right_navigation_gsc navigation_gsc" onclick = "slideRight()"></div>

非常感谢大家 ;)

纯 JavaScript 中的 Onclick 滑块 - 事件不会更改 CSS 值

Onclick slider in pure JavaScript - event doesn't changes CSS value

html

javascript

css

slider