将图像添加到 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 */
}

这就是我向构造函数添加图片的方式。还有很多工作要做，但至少这是一个开始。任何 cmets 仍然很感激，因为我很绿！！

Answer 1

你在这里写的：

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

实际上是一种完全合理且可行的方式。您在 DOM 中输入引用您要显示的图像的 <img> 节点。

但是，在许多情况下，更常见且可能更易于维护的解决方案是使用引用背景图像的 CSS 样式，然后使用导致图像显示的样式将 <div> 输入到 DOM 中。

不过，您应该问问自己，最好在没有任何工具支持的情况下执行此操作。许多最流行的 JavaScript 库都内置了这样的工具，或者至少有一些方法可以让构建这种类型的代码变得更加容易。

当然，如果您这样做是为了在使用框架之前学习 Web 开发的基础知识，以便您更彻底地了解他们在做什么，对您更有力量:-)