1,DOM-->Documnet Object Model
2.DOM 定义了表示和修改文档所需的方法.DOM对象即为宿主对象,由浏览器厂商定义,用来操作html和xml功能的一类对象的集合,也有人称DOM是对HTML以及XML的标准编程接口
<div style="width: 100px;height: 100px; background-color: #00FFFF;"></div>
<script type="text/javascript">
//1,DOM-->Documnet Object Model
//2.DOM 定义了表示和修改文档所需的方法.DOM对象即为宿主对象,由浏览器厂商定义,用来操作html和xml功能的一类对象的集合,也有人称DOM是对HTML以及XML的标准编程接口
//dom 对象 div
var div=document.getElementsByTagName('div')[0];
div.style.width = '100px';
div.style.height = '100px';
div.style.backgroundColor='red';
var count =0;
div.onclick = function(){
count++;
if(count % 2==1){
this.style.backgroundColor='green';
}else{
this.style.backgroundColor='red';
}
this.style.borderRadius="50%";
}
</script>
dom做选项卡
<style type="text/css">
.wrapper div.content{
display: none;
width:200px;
height: 200px;
border:2px solid #FF0000;
}
.action {
background-color: #FF4400;
}
</style>
</head>
<body>
<div class='wrapper'>
<button class="action">111</button>
<button>222</button>
<button>333</button>
<div class='content' style="display: block;">11111</div>
<div class='content' >22222</div>
<div class='content' >33333</div>
</div>
<script type="text/javascript">
var btn=document.getElementsByTagName('button');
var div=document.getElementsByClassName('content');
for(var i=0;i<btn.length;i++){
(function (n){
btn[n].onclick=function (){
for(var i=0;i<btn.length;i++){
btn[i].className=''
div[i].style.display='none';
}
this.className='action';
div[n].style.display="block";
}
}(i))
}
</script>
</body>
移动div新建div
<script type="text/javascript">
var div=document.createElement('div');
document.body.appendChild(div);
div.style.width='100px';
div.style.height='100px';
div.style.backgroundColor='red';
div.style.position='absolute';
div.style.left='0';
div.style.top='0';
var speed = 1;
var timer = setInterval(function(){
speed += speed/20;
div.style.left=parseInt(div.style.left)+speed+'px';
div.style.top=parseInt(div.style.top)+speed+'px';
if(parseInt(div.style.top)>200&&parseInt(div.style.left)>500){
clearInterval(timer);
}
},100);
</script>
键盘输入上下左右移动元素
<body>
<button style="width: 100px;height: 50px;background:linear-gradient(to left,#999,#000,#432,#fcc);position: fixed;right: 0;top: 50%;text-align: center;line-height: 50px;color: white;font-size: 10px;font-family: arial;">加速</button>
<script type="text/javascript">
var btn=document.getElementsByTagName('button')[0];
btn.onclick=function (){
speed += 5;
}
var div=document.createElement('div');
document.body.appendChild(div);
div.style.width='100px';
div.style.height='100px';
div.style.backgroundColor='red';
div.style.position='absolute';
div.style.left='0';
div.style.top='0';
var speed=5;
document.onkeydown=function(e){
switch(e.which){
case 38:
div.style.top=parseInt(div.style.top)-speed+"px";
break;
case 40:
div.style.top=parseInt(div.style.top)+speed+"px";
break;
case 37:
div.style.left=parseInt(div.style.left) -speed+"px";
break;
case 39:
div.style.left=parseInt(div.style.left)+speed +"px";
break;
}
}
</script>
</body>
刮刮卡
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
width: 200px;
height: 100px;
}
li{
box-sizing: border-box;
/* 元素的大小归为width和geight */
float:left;
width: 10px;
height: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<ul>
<li img-data='0'></li>
<li img-data='0'></li>
<li img-data='0'></li>......
<script type="text/javascript">
var ul=document.getElementsByTagName('ul')[0];
ul.onmouseover=function (e){
var event=e||window.event;
var target=event.target||event.srcElement;
var li=target.getAttribute('img-data');
target.style.backgroundColor='rgb(0,255,'+li+')';
target.setAttribute('img-data',parseInt(target.getAttribute('img-data'))+100);
}
</script>
网友评论