javascript - div.style.left="600px"怎么不起作用？

问题描述

问 题

用原生js控制div向左移动600px，不起作用。已经设置父元素position：relative，
当前元素position：absolute，即使已经设置<div style="left:600px"></div>即内联样式也不起作用。
代码如下：

<div class="stage" >
    <span class="prev arrow">&lt;</span>
    <span class="next arrow">&gt;</span>
    <div class="wrap" style="left:-600px">
        <img src="img/1.jpg" alt="1">
        <img src="img/1.jpg" alt="2">
        <img src="img/2.jpg" alt="3">
        <img src="img/3.jpg" alt="4">
        <img src="img/4.jpg" alt="5">
        <img src="img/4.jpg" alt="6">
    </div>
    <div class="container">
        <span class="on"></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</div>
<script type="text/javascript">
    window.onload=function(){

        var prev =document.getElementsByClassName("prev");
        var next =document.getElementsByClassName("next");
        var wrap =document.getElementsByClassName("wrap");
        console.log( );
        next.onclick=function(){
            wrap.style.left= parseInt(wrap.style.left)-600+"px";

        }
        prev.onclick=function(){
              wrap.style.left= parseInt(wrap.style.left)+600+"px";
        }
    }

</script>

解决方案

你把document.getElementsByClassName改成document.getElementById试试。
或者改成

var prev =document.getElementsByClassName("prev")[0];
var next =document.getElementsByClassName("next")[0];
var wrap =document.getElementsByClassName("wrap")[0];

这篇关于javascript - div.style.left="600px"怎么不起作用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！