1、改变元素的外观 (1)、通过style对象，该对象包含了元素中所有的css属性；通常情况下，某个CSS属性的名称与该属性在CSS文件中的名称是相同的；值得注意
的是：有连接符号“-”的CSS属性需要去掉其“-”符号，并把第二个单词首字母变成大写；style对象只能访问到内联样式属性； (2)、修改className属性 2、动态定位和移动元素 (1)、移动元素 css中有两种定位方式：一种是absolute定位，一种是relative定位，都通过top、left属性来确定坐标； 绝对定位即对象脱离了文档流，可以随意设置坐标，相对定位没有脱离文档流，只是在原来的位置上做偏移，设置坐标确定偏移位置，相对自
身位置偏移；javascript中可以通过设置这些属性的值来动态定位或移动元素；
例：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body{
padding:0px;
margin:0px;}
div{
position:absolute;
background-color:Gray;
width:200px;
height:140px;
padding:15px;
margin:0px;}
</style>
<script type="text/javascript">
function move() {
var left = document.getElementById("txt_left");
var top = document.getElementById("txt_top");
var div = document.getElementById("mydiv");
div.style.left = parseInt(left.value) + "px";
div.style.top = parseInt(top.value) + "px";
}
</script>
</head>
<body>
<div id="mydiv">
<form id="myfrom" method="get" action="" onsubmit="move();return false">
<p>left:<input type="text" id="txt_left" /></p>
<p>top:<input type="text" id="txt_top" /></p>
<input type="submit" id="btn_submit" value="移动到指定坐标" />
</form>
</div>
</body>
</html>
(2)一个简单的动画效果 动画三要素：
a、起始位置b、向目标位置大的移动；
c、目标位置，停止动画； 元素对象的offsetTop、offsetLeft属性返回相对于父元素的位置的偏移量，返回值为数值类型；
window对象的两个计时器：setTimeout(fun_name,time)是超时，即过多少秒后调用一次函数，之后不再调用，可以放在函数内部实现循环调用
效果；setInterval(fun_name,time)是间隔，即每隔多少秒就调用一次函数，反复执行，循环调用；
例：
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title>
<style type="text/css">
body
{
padding: 0px;
margin: 0px;
}
div
{
position: absolute;
background-color: Gray;
width: 200px;
height: 140px;
padding: 15px;
margin: 0px;
}
</style> <script type="text/javascript">
var derection = false; //表示向右走
function move() {
var currentLeft = document.getElementById("mydiv").offsetLeft;
var temp;
if (!derection) {
temp = currentLeft + 2;
if (currentLeft >= 600) {
derection = true;
}
} else {
temp = currentLeft - 2;
if (currentLeft <= 0) {
derection = false;
}
}
document.getElementById("mydiv").style.left = temp+"px";
setTimeout(move, 10); }
window.onload = move;
</script> </head>
<body>
<div id="mydiv">
<form id="myfrom" method="get" action="" onsubmit="move();return false">
<p>left:<input type="text" id="txt_left" /></p>
<p>top:<input type="text" id="txt_top" /></p>
<input type="submit" id="btn_submit" value="移动到指定坐标" />
</form>
</div>
</body>
</html>
这样一个简单的左右移动的层就实现了；