图像添加到JavaScript对象

Question

我想创建/发明一种新的JavaScript滑块对象将由显示基线图像的工作： http://imgur.com/DuVkE.png

然后我想用这些“旋钮”来层取决于特定情况

http://imgur.com/GKkqx.png 这些已经被“切断”并将被放置在三个黑色旋钮之一上。我有许多不同的颜色，因为我计划穿过它们，以便颜色看起来从一个变为另一个。

所以我需要能够附加一个图像到我从用户收到的ID，然后再操纵图像。

我的代码：

<div id='option1'></div> 

<script type="text/javascript"> 

var slide1 = new slider("option1"); 

我的构造函数会是这个样子：

function slider(id) { 

var obj = document.getElementById(id); 
if (!obj) { 
var state = -1; 
return -1; 
} 
var state = 0; //blank state 

//alert("in"); 
//alert(document.getElementById(id).className); 

//this.addClass("hSliderBack"); INCORRECT SYNTAX!!! 
$("#"+id).addClass("hSliderBack"); //this works 
} 

我固定上面的addClass的问题，虽然有点难看。

我的CSS脚本：

.hSliderBack 
{ 
background-image: url('/Switches/switchLine.png'); 
background-repeat: no-repeat; 
padding-left: 2px; /* width of the image plus a little extra padding */ 
display: block; /* may not need this, but I've found I do */ 
} 

这是我怎么能图片添加到我的构造函数。还有很多工作要做，但至少这是一个开始。任何意见仍然赞赏，因为我很绿！

Answer 1

你写的什么位置：

//obj.innerHTML = "<img src=' this doesn't seem right to me. 

实际上是在一个非常合理和可行的方式。您输入到DOM中参考要显示的图像的<img>节点。

但是，在许多情况下，更常见的或者更可维护的解决方案是使用引用背景图像的CSS样式，并使用导致图像显示的样式将DOM输入到DOM中。

但是，你应该问自己，没有工具的支持是最好的。许多最流行的JavaScript库都内置了这样的工具，或者至少有一些方法可以使得构建这种类型的代码变得非常容易。

当然，如果你正在做使用框架在此之前，了解网络发展的基础，所以你明白自己在做什么更彻底，更权力给你:-)