我做了一些代码来更改图像位置
该代码只能运行一次,但第二次将无法运行。
function prev() {
if(document.getElementById("bookCon").style.left=="0px"){}
else {
document.getElementById("bookCon").style.right-="800px";
}
}
function next() {
if(document.getElementById("bookCon").style.left=="5000px") {}
else {
document.getElementById("bookCon").style.right+="800px";
}
}
第二版...也行不通。
function getStyleNum(item,prop) {
if (typeof item == "string") { item = document.getElementById(item); }
return parseInt(item.style[prop],10);
}
function prev() {
var item = document.getElementById("bookCon");
if (getStyleNum(item,"right") !== 0) {
var val = getStyleNum(item, "right");
item.style.right = (val - 800) + "px";
}
}
function next() {
var item = document.getElementById("bookCon");
if (getStyleNum(item,"right") !== 1600) {
var val = getStyleNum(item, "right");
item.style.right = (val + 800) + "px";
}
}
最佳答案
您的代码存在多个问题:
您不能使用+= "800px"
,因为这些字符串是字符串,因此最终会出现"500px800px"
之类的内容。
您不能对字符串进行数学运算。
您无法可靠地与"0px"
进行比较
您检查.left
的值并设置.right
的值。您应该只使用其中之一,而不要同时使用两者。
您的代码可以进行更多的DRY(不重复执行)
直接在对象上读取style属性不会包含通过样式表设置的任何内容
如果style.left
值是直接在对象上设置的(最初不是来自样式表)并且定位了对象,则可以使用这种类型的逻辑(转换为数字)。我不知道您到底想通过检查.left
然后更改.right
来完成什么,所以这只是您的逻辑猜测,但是您应该能够了解如何进行这种排序的一般想法的东西。
function prev() {
var item = document.getElementById("bookCon");
if (parseInt(item.style.left, 10) != 0) {
var val = parseInt(item.style.right, 10) || 0;
item.style.right = (val - 800) + "px";
}
}
您可能会发现此util函数有用:
function getStyleNum(item, prop) {
if (typeof item == "string") {
item = document.getElementById(item);
}
return parseInt(item.style[prop], 10) || 0;
}
function prev() {
var item = document.getElementById("bookCon");
if (getStyleNum(item, "left") != 0) {
var val = getStyleNum(item, "right");
item.style.right = (val - 800) + "px";
}
}
附言我仍然不明白为什么您要检查
.left
的值然后修改.right
的值。在给定的时间,其中只有一个可以处于活动状态。工作演示:http://jsfiddle.net/jfriend00/awjv9/
关于javascript - 无法使用javascript函数更改图像位置,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/19962409/