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

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

本文关键字：改变 CSS 事件 JavaScript 中的 Onclick 滑块      更新时间：2023-09-26

我试图用纯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 值？

有几个问题。正如在其他答案中指出的那样，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";
 }    

getElementsByClassName("slides_gsc")

将返回一个您必须循环访问的数组，如果您确定该类使用只有 1 个 elem

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++;
 }

根据 icke 的回答，我做了这样的代码，它正在工作：

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>

非常感谢大家;)

相关文章：