javascript - 使用 JavaScript 获取/附加属性(无 jQuery)

Question

我正在研究输入 slider 功能。我已经成功地使用 jQuery，但我想用纯 JS 来完成它。

这是一把 fiddle 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");    
    });

});

如您所见，该函数从 slider 获取输入值并将其作为 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;
};

您的代码的问题是您将 CSS 选择器术语与 document.getElementById 一起使用，它只需要元素的 ID。如果您想像使用 jQuery 一样使用 CSS 选择器，则使用 document.querySelector(获取与选择器对应的第一个元素)或 document.querySelectorAll。此外，您需要将回调放在 slider 元素的 onchange 事件处理程序中。