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.

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

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

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

当然，如果你这样做是为了在使用框架之前学习Web开发的基础知识，这样你就能更全面地了解他们的工作，给你带来更多的力量： - ）

将图像添加到javascript对象

1 个答案: