Javascript 如何移动CSS样式表样式化的元素？_Javascript_Html_Css

Javascript 如何移动CSS样式表样式化的元素？

javascript html css

Javascript 如何移动CSS样式表样式化的元素？,javascript,html,css,Javascript,Html,Css,我有一个我想移动的图像。如果我有下面的HTML，我可以使用javascript移动元素： <html> <head> <title>Snake</title> <script type="text/javascript" src="snake.js"></script>  </

我有一个我想移动的图像。如果我有下面的HTML，我可以使用javascript移动元素：

<html>
<head>
    <title>Snake</title>
    <script type="text/javascript" src="snake.js"></script>
    <!-- <link type="text/css" href="snake.css"> -->
</head>
<body onKeyPress="ProcessKeypress(event);">
    <p><img id="snake" style="z-index: 0; left: 300px; position: absolute; top: 250px" 
    float=top border=0 hspace=0 src="snake.gif"></p>
</body>

下面是我用来移动图像的JavaScript。感谢您的帮助

function moveObj(name, Xpix, Ypix) 
{    
    obj = document.getElementById(name);

    px = parseInt(obj.style.left) + Xpix;       
    py = parseInt(obj.style.top) + Ypix;
    obj.style.left = px;
    obj.style.top = py;
}

function ProcessKeypress(e)
{
    var myObj = 'snake';
    var moveBy = 10;

    if(e.keyCode === 97) {
        moveObj(myObj, -moveBy, 0);
    }
    else if(e.keyCode === 100) {
        moveObj(myObj, moveBy, 0);
    }
    else if(e.keyCode === 115) {
        moveObj(myObj, 0, moveBy);
    }
    else if(e.keyCode === 119) {
        moveObj(myObj, 0, -moveBy);
    }
}

我不确定你的代码是否是复制粘贴，但是你需要关闭链接标签来链接你的css

<link rel="stylesheet" type="text/css" href="location" />

但这与问题无关。这是一个转载，所以我要标记为它。指

这应该能回答你的问题。当我处理你的代码时，它回答了我的问题，这是有道理的。祝你好运。

obj.style.left

仅访问内联中定义的样式属性

使现代化这是你的

函数：getStyleProp（）获取当前应用的样式函数：moveObj（）功能：ProcessKeypress（）

我还使用jQuery解决了您的问题：

函数moveObj 功能处理按键事件触发器改为附加到文档

为什么不使用jQuery？这会容易得多…这对我来说是一个学习练习。如果可以的话，我只想使用原始JavaScript、HTML和CSS。CSS

align

属性，等效的属性似乎是CSS

float

属性。由于这是您所做的唯一更改，它可能会阻止您的图像由JS控制。在CSS和HTML情况下，将

align

更改为

float

，上述代码中显示的更改。HTML代码仍按预期工作，但没有修复CSS问题。有什么理由JavaScrip不允许我重写CSS表吗？我怀疑有什么叫做

float:top。如果删除，会发生什么？你为什么写这篇文章？我尝试了两种解决方案，但似乎都不适合我。getStyleProp
函数始终返回NaN。此外，我还尝试了jQuery解决方案（顺便说一句，感谢提供了额外的解决方案），似乎obj.css变量不存在，它也出现了NaN。我在你们演示的时候实现了它，但并没有运气。@shortspider，我已经为这两种方法做了演示。什么东西不在它们上面工作？在我的代码实现中发现一个错误。它就像一个符咒。谢谢你的帮助。：）
function moveObj(name, Xpix, Ypix) 
{    
    obj = document.getElementById(name);

    px = parseInt(obj.style.left) + Xpix;       
    py = parseInt(obj.style.top) + Ypix;
    obj.style.left = px;
    obj.style.top = py;
}

function ProcessKeypress(e)
{
    var myObj = 'snake';
    var moveBy = 10;

    if(e.keyCode === 97) {
        moveObj(myObj, -moveBy, 0);
    }
    else if(e.keyCode === 100) {
        moveObj(myObj, moveBy, 0);
    }
    else if(e.keyCode === 115) {
        moveObj(myObj, 0, moveBy);
    }
    else if(e.keyCode === 119) {
        moveObj(myObj, 0, -moveBy);
    }
}

<link rel="stylesheet" type="text/css" href="location" />

function getStyleProp(elem, prop){
    if(window.getComputedStyle)
        return window.getComputedStyle(elem, null).getPropertyValue(prop);
    else if(elem.currentStyle) return elem.currentStyle[prop]; //IE
}

function moveObj(obj, Xpix, Ypix) {  
    obj.style.left = parseInt(getStyleProp(obj,'left')) + Xpix+"px";
    obj.style.top= parseInt(getStyleProp(obj,'top')) + Ypix + "px";
}

function ProcessKeypress(e) {
    var myObj = document.getElementById("snake");
    var moveBy = 10;
    switch(e.charCode) {
        case 97: moveObj(myObj, -moveBy, 0); break;
        case 100: moveObj(myObj, moveBy, 0); break;
        case 115: moveObj(myObj, 0, moveBy); break;
        case 119: moveObj(myObj, 0, -moveBy); break;            
    }
}    

function moveObj(obj, Xpix, Ypix) {    
    obj.css('left', parseInt(obj.css('left')) + Xpix);       
    obj.css('top', parseInt(obj.css('top')) + Ypix);
}

function ProcessKeypress(e) {
    var myObj = $("#snake"); //It will be better if it is cached
    var moveBy = 10;
    switch(e.charCode) { //used Switch for better manageability
        case 97: moveObj(myObj, -moveBy, 0); break;
        case 100: moveObj(myObj, moveBy, 0); break;
        case 115: moveObj(myObj, 0, moveBy); break;
        case 119: moveObj(myObj, 0, -moveBy); break;            
    }
}

$(document).on('keypress', ProcessKeypress);