Question

我正试图通过Jquery中滑块的值来动态改变图像的宽度

Firebug错误

TypeError: document.getElementsByClassName(...).css is not a function   
document.getElementsByClassName(".images").css("width", ui.value);

HTML

<div id="filmpkes">         
    <img class="images" src="http://upload.wikimedia.org/wikipedia/commons/thumb/d/d0/A-Team-Logo.svg/600px-A-Team-Logo.svg.png" width="100px"/>            
</div>

JS

$(function(){
$("#slider").slider(

    {   min:50,
        max:250,
        change:function(event,ui){
            alert(ui.value);
            document.getElementsByClassName(".images").css("width", ui.value);
        }           
    }               
);
});

编辑：不敢相信我把它混合了，谢谢！

编辑：无法让图像调整大小 http://jsfiddle.net/P5PLg/

Answer 1

检查此代码并替换为您的js代码

$(function(){
$("#slider").slider(
    {   min:50,
        max:250,
        change:function(event,ui){
            alert(ui.value);
            $(".images").css("width", ui.value);
        }           
    }               
);
});

Answer 2

问题是vanilla JavaScript没有.css（）方法，如果你知道jQuery就可以使用：

$(".images").css("width", ui.value);

或在香草javascript：

var images = document.getElementsByClassName("images");

images.forEach(function( image, index, images ) {

    image.style.width = ui.value;
});

Answer 3

你正在混合使用jQuery的香草javascript ...
如果使用普通香草JS，您需要移除.中的getElementsByClassName(".images")

试试这个：

var images = document.getElementsByClassName("images");
$(images).css("width", ui.value);

或者（甚至更好）只用jQuery看起来像：

$(".images").css("width", ui.value);

Answer 4

你为什么使用

document.getElementsByClassName(".images").css("width", ui.value);

为什么不直接使用JQuery？该文档没有CSS功能。

$(".images").css("width", ui.value);

Jquery通过类更改图像宽度

4 个答案: