如何移動由CSS樣式表設置樣式的元素？

Question

我有要移動的圖像。 如果我具有以下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>

但是我想使用CSS監視image元素。 當我這樣做時，我的代碼無法移動圖像。 下面是我想使用的HTML和CSS。

<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" src="snake.gif"></p>
</body>

@CHARSET "UTF-8";
img {
z-index: 0;
left: 300px; 
position: absolute; 
top: 250px;
float: top;
border: 0;
hspace: 0;
}

下面的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);
    }
}

Answer 1

我不確定您的代碼是否為復制粘貼，但是您需要關閉鏈接標記才能鏈接到CSS。

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

但這是沒有意義的。 這是轉貼，因此我將其標記為。 請參閱為什么element.style.left返回NaN？

那應該回答你的問題。 當我處理您的代碼時，它回答了我的問題，這很有意義。 祝好運。

Answer 2

obj.style.left訪問內聯定義的樣式屬性。

更新

這是您的純JavaScript解決方案

函數：getStyleProp（）獲取當前應用的樣式^{^[源]}

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

函數：moveObj（）

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

函數：ProcessKeypress（）

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;            
    }
}

我還使用jQuery解決了您的案例：演示

函數moveObj

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

功能ProcessKeypress

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);

如何移動由CSS樣式表設置樣式的元素？

問題描述

2 個解決方案

解決方案1
0 2012-03-27 04:51:10

解決方案2
0 已采納 2012-03-27 05:07:03

更新

函數：getStyleProp（）獲取當前應用的樣式^{^[源]}

函數：moveObj（）

函數：ProcessKeypress（）

函數moveObj

功能ProcessKeypress

而是將事件觸發器附加到文檔

如何移動由CSS樣式表設置樣式的元素？

問題描述

2 個解決方案

解決方案1 0 2012-03-27 04:51:10

解決方案2 0 已采納 2012-03-27 05:07:03

更新

函數：getStyleProp（）獲取當前應用的樣式[源]

函數：moveObj（）

函數：ProcessKeypress（）

函數moveObj

功能ProcessKeypress

而是將事件觸發器附加到文檔

解決方案1
0 2012-03-27 04:51:10

解決方案2
0 已采納 2012-03-27 05:07:03

函數：getStyleProp（）獲取當前應用的樣式^{^[源]}