我正在研究输入 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";
最佳答案
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
事件处理程序中。
关于javascript - 使用 JavaScript 获取/附加属性(无 jQuery),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22805073/