要在JS中修改样式，可以这样：
var dom = document.getElementById('abc')dom.style.padding = '8px' //必须提供字符串，数字+单位，不能直接写数字
dom.style.margin = '0 auto'
dom.style.backgroundColor = '#0F0' //CSS属性中的background-color之类有连字符的，去掉连字符，采用驼峰式，首字母小写，后面所有单词首字母大写
//浏览器特有属性：
dom.style.webkitAppearance = 'button' //对应-webkit-appearance属性
看到下面的例子了么？aa.style.backgroundColor = '#ff0000'就可以了
<!DOCTYPE HTML>
<html>
<head>
<meta charset=UTF-8 />
<title>YuGiOh</title>
<style type="text/css">
#wrap {
margin: auto
position: relative
width: 80%
}
</style>
<script type="text/javascript">
window.onload = function ()
{
var a = new Array ([
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1
], [
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1
], [
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1
], [
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1
], [
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1
], [
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1
], [
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1
], [
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1
], [
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1
])
var randX = Math.floor (Math.random () * a.length), randY = Math.floor (Math.random () * a[randX].length)
a[randX][randY] = 0
for ( var i = 0 i < a.length i++)
{
var array = []
for ( var j = 0 j < a[i].length j++)
{
var aa = document.createElement ("div")
aa.style.position = "absolute"
aa.style.border = '1px solid black'
aa.style.width = W + "px"
aa.style.height = H + "px"
aa.style.left = j * W + "px"
aa.style.top = i * H + "px"
aa.id = i + "_" + j
if (a[i][j] == 0)
{
aa.style.backgroundColor = 'red'
X = i
Y = j
}
else
{
aa.style.backgroundColor = 'green'
}
wrap.appendChild (aa)
array.push (aa)
}
SITE.push (array)
}
}
var exchange = function (dir)
{
var tx = X, ty = Y, d
if (dir == 37)
{
if (Y < 1)
{
return
}
else
{
ty--
d = 'left'
}
}
else if (dir == 38)
{
if (X < 1)
{
return
}
else
{
tx--
d = 'top'
}
}
else if (dir == 39)
{
if (Y > SITE[X].length - 2)
{
return
}
else
{
ty++
d = 'left'
}
}
else if (dir == 40)
{
if (X > SITE.length - 2)
{
return
}
else
{
tx++
d = 'top'
}
}
var that = SITE[tx][ty]
var me = SITE[X][Y]
var sd = that.style[d]
that.style[d] = me.style[d]
me.style[d] = sd
var tmp = SITE[tx][ty]
SITE[tx][ty] = SITE[X][Y]
SITE[X][Y] = tmp
X = tx
Y = ty
}
var W = 50, H = 50, X = -1, Y = -1, SITE = []
document.onkeydown = function (e)
{
e = e || window.event
var keyCode = e.keyCode
if (!/^(37|38|39|40)$/.test (keyCode))
{
return false
}
exchange (keyCode)
}
document.ondragstart = document.onselectstart = document.oncontextmenu = function ()
{
return false
}
</script>
</head>
<body>
<div id="wrap"></div>
</body>
</html>
