Javascript Style.width和left不'；行不通_Javascript_Jquery_Html_Css

Javascript Style.width和left不'；行不通

javascript jquery html css

Javascript Style.width和left不'；行不通,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我想用这个背景在菜单div中制作一个“照片条”的效果我正在更改div的宽度和左侧，以便用javascript/jquery模拟这种效果，但它不是这样工作的，因为现在是“onclick”，但我想让它自动使用setInterval 以下是HTML代码： <!DOCTYPE html> <html> <head> <title>Prueba</title> <link type = "text/css" rel =

我想用这个背景在菜单div中制作一个“照片条”的效果

我正在更改div的宽度和左侧，以便用javascript/jquery模拟这种效果，但它不是这样工作的，因为现在是“onclick”，但我想让它自动使用setInterval

以下是HTML代码：

<!DOCTYPE html>
<html>
<head>
    <title>Prueba</title>
    <link type = "text/css" rel = "stylesheet" href = "PruebaIndex.css">
    <script type = "text/javascript" src = "jquery-2.1.4.js"></script>
    <script>
        $(document).ready(function(){
            var slider = document.getElementById("#slider");
            var speed = 10;
            $("#slider").click(function(){
                slider.style.width = (slider.style.width+speed)+"px";
                slider.style.left = (slider.style.left-speed)+"px";
            });
        });
    </script>
</head>

<body>
    <div id = "wrapper">
        <div id = "slider">

        </div>
    </div>
</body>
</html>

我尝试了其他不同的方法，比如window.onload，将代码放在body中，尝试$（object.width），等等。。问题是，当我单击“此项不移动”时，稍后我将尝试自动执行

我还有一个疑问，这个菜单里面会有div（选项），当我移动这个div（“滑块”）时，这些div也会移动（选项）

编辑：我是由DinoMyte添加的

var speed = 10; $("#slider").click(function(){ $(this).css("width",(parseInt($(this).css("width").replace("px","")) + speed) + "px"); $(this).css("left",(parseInt($(this).css("left").replace("px","")) - speed) + "px"); });
现在它工作正常，只需在不点击的情况下自动执行此操作

很抱歉我的英语不好。
问题是
slider.style.width
会给你宽度+“px”，所以
（slider.style.width+speed）
不起作用。您需要先替换“px”。还需要将当前宽度值解析为整数

slider.style.width = parseInt(slider.style.width.replace("px","")) +speed)+"px";
更好的方法是：

var speed = 10; $("#slider").click(function(){ $(this).css("width",(parseInt($(this).css("width").replace("px","")) + speed) + "px"); $(this).css("left",(parseInt($(this).css("left").replace("px","")) - speed) + "px"); });

我得到了一个类似的解决方案，您的代码运行正常，但“left”并没有降低我不知道为什么，我尝试了$（this）.left（）但什么都没有..left似乎运行正常。我拿出了额外的东西。试试这个：我把你做的警报，它打印“NaN”，它不应该打印一个数字？我在alert中打印宽度，它说“800”，“810”很好，但我不知道为什么左侧打印“NaN”。我尝试在不进行解析的情况下打印左侧边距，它打印“auto”，但我将边距定义为0，并且仍然打印“auto”。检查此项：。另外，在css中，我已经将left定义为50px，所以在以后的每次单击中，都应该得到-10的值
var speed = 10; $("#slider").click(function(){ $(this).css("width",(parseInt($(this).css("width").replace("px","")) + speed) + "px"); $(this).css("left",(parseInt($(this).css("left").replace("px","")) - speed) + "px"); });