Question

我正在研究输入滑块功能。我已成功使用jQuery，但我想用纯JS来做。

这是一个小提琴http://jsfiddle.net/PbED3/。代码如下：

HTML

<div class="image">
  <img src="http://s23.postimg.org/78bouskgb/tumblr_n381qg_QRTS1st5lhmo1_1280.jpg" />    
</div>

<div class="slider">
  <input type="range" id="slider" min="0" max="100" onchange="rangevalue.value=value" value="100"/>
  <output id="rangevalue">100</output>
</div>

JS（jQuery）

$(function() {

$("#slider").change(function(e) {   
        $(".image").css("height", $(this).val() * 2 + "px");    
    });

});

如您所见，该函数从滑块获取输入值，并将其作为CSS高度值附加到图像元素。

我想在没有Jquery的情况下这样做。

到目前为止，我的功能是：

//Pure JS
var value = document.getElementById("#slider").value;
var image = document.getElementsByClassName('.image');

image.style.height= value + "px";

Answer 1

以下是它的工作原理，HTML：

<div class="image">
    <img src="http://s23.postimg.org/78bouskgb/tumblr_n381qg_QRTS1st5lhmo1_1280.jpg" />    
</div>

<div class="slider">
    <input type="range" id="slider" min="0" max="100" value="100"/>
    <output id="rangevalue">100</output>
</div>

和javascript：

var slider = document.getElementById("slider");
var rangevalue = document.getElementById("rangevalue");
var image = document.querySelector('.image');

slider.onchange = function () {
    image.style.height = (slider.value * 2) + 'px';
    rangevalue.value = slider.value;
};

你的代码就是你正在使用带有document.getElementById的CSS选择器术语，它只需要元素的id。如果你想像使用jQuery那样使用CSS选择器，那么使用document.querySelector（抓取对应于选择器的第一个元素）或document.querySelectorAll。而且，您需要将回调放在滑块元素的onchange事件处理程序中。

Answer 2

你到了那里，这是一个没有jQuery的工作示例：

var slider =  document.getElementById("slider");

if (slider.addEventListener) {
    slider.addEventListener("change", slideHandler, false);
} else {
    slider.attachEvent('onchange', slideHandler);
}  

function slideHandler() {
    var value = slider.value;
    var image = document.getElementsByClassName('image')[0];
    if (image) {
        image.style.height= value + "px";
    }
}

主要问题不是您需要绑定事件（addEventListener或attachEvent），而您仍然将jQuery样式选择器传递给getElementById和getElementsByClassName函数。此外，getElementsByClassName返回一个数组，因此您只想更新找到的第一个实例。

Updated Fiddle

使用JavaScript获取/附加属性（无jQuery）

2 个答案: