如何移动CSS样式表样式的元素？ [英] How to move an element styled by CSS stylesheet?
本文介绍了如何移动CSS样式表样式的元素？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个我想移动的图片。如果我有下面的HTML，我可以移动元素与javascript：
< html>
< head>
< title> Snake< / title>
< script type =text / javascriptsrc =snake.js>< / script>
<！ - < link type =text / csshref =snake.css> - >
< / head>
< body onKeyPress =ProcessKeypress（event）;>
< p>< img id =snakestyle =z-index：0; left：300px; position：absolute; top：250px
float = top border = 0 hspace = 0 src =snake.gif>< / p>
< / body>
使用CSS的图像元素。当我这样做我的代码移动图像不工作。 HTML和CSS是我想要使用的。
< html>
< head>
< title> Snake< / title>
< script type =text / javascriptsrc =snake.js>< / script>
< link type =text / csshref =snake.css>
< / head>
< body onKeyPress =ProcessKeypress（event）;>
< p>< img id =snakesrc =snake.gif>< / p>
< / body>
@CHARSETUTF-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）;
}
}
解决方案
code> obj.style.left 只能访问在内联中定义的样式属性。
UPDATE
这是您的纯JavaScript解决方案
函数：getStyleProp（）获取当前应用的样式 [Source ]
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）;打破;
case 100：moveObj（myObj，moveBy，0）;打破;
case 115：moveObj（myObj，0，moveBy）;打破;
case 119：moveObj（myObj，0，-moveBy）;打破;
}
}
我也使用jQuery解决了您的情况：演示
function moveObj
function moveObj（obj，Xpix，Ypix）{
obj.css '，parseInt（obj.css（'left'））+ Xpix）;
obj.css（'top'，parseInt（obj.css（'top'））+ Ypix）;
}
函数ProcessKeypress
function ProcessKeypress（e）{
var myObj = $（＃snake）; //它会更好，如果它是缓存
var moveBy = 10;
switch（e.charCode）{// used Switch for better manageability
case 97：moveObj（myObj，-moveBy，0）;打破;
case 100：moveObj（myObj，moveBy，0）;打破;
case 115：moveObj（myObj，0，moveBy）;打破;
case 119：moveObj（myObj，0，-moveBy）;打破;
}
}
事件触发器附加到文档
$（document）.on（'keypress'，ProcessKeypress）;
I have an image that I want to move. I can move the element with javascript if I have the HTML below:
<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>
However I want to stye the image element using CSS. When I do this my code to move the image does not work. HTML and CSS below are what I would like to use.
<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 below is what I am using to move the image. Any and all help appreciated.
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);
}
}
解决方案
obj.style.left accesses the style properties defined in inline only.
UPDATE
Here is your pure JavaScript Solution
Function: getStyleProp() to get the current applied style [Source]
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()
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()
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;
}
}
I also solved your case using jQuery: Demo
Function moveObj
function moveObj(obj, Xpix, Ypix) {
obj.css('left', parseInt(obj.css('left')) + Xpix);
obj.css('top', parseInt(obj.css('top')) + Ypix);
}
Function 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;
}
}
Event Trigger attached to document instead
$(document).on('keypress', ProcessKeypress);
这篇关于如何移动CSS样式表样式的元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
