HTML DOM Style 对象 样式设置修改 （案例）
程序员文章站
2022-07-04 18:49:14
...
- DOM样式的修改，对象.style.属性名=属性值;
- CSS样式和DOM样式在js用法区别
CSS DOM
width width
height height
background-color backgroundColor
font-size fontSize
border-color borderColor
... ...
- DOM样式值的获取：
1.对象.style.属性名 只能获取行内样式
2.window.getComputedStyle(对象,null) 获取指定对象的所有样式
<button id="btn">隐藏/显现</button>
<div id="box"></div>
<script type="text/javascript">
var os = document.getElementById('box');//获取页面元素
//样式设置
os.style.width='100px';
os.style.height='100px';
os.style.backgroundColor='red';
os.innerHTML='你好';
os.style.color='#';
os.style.textAlign='center';
os.style.lineHeight='100px';
os.style.borderRadius='50%';
//添加点击事件 //切换
document.getElementById('btn').onclick=function(){
var dis=window.getComputedStyle(os,null).display;//获取样式值
if (dis=='block') {
os.style.display='none';
}else{
os.style.display='block';
}
};
例（1）颜色选取
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
ul,li{list-style-type: none;}
ul{width: 500px;margin:50px auto;height: 100px;}
ul li{float: left;margin-right: 10px;width: 50px;height: 50px; border: 1px solid red;}
ul li:nth-child(1){border-width: 2px;}
div{width: 150px;height: 150px;border: 1px solid gray;clear: both;margin: auto;}
</style>
</head>
<body>
<ul id="menu">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div id="box"></div>
<script type="text/javascript">
var lis=document.getElementById('menu').children;
var o=document.getElementById('box');
var curIndx=0;//保存当前被选中的li的索引
//遍历所有的li
for(var i=0;i<lis.length;i++){
lis[i].index=i;//新增属性 保存索引
//rgb(110,110,110)
var num1=getNum();
var num2=getNum();
var num3=getNum();
lis[i].style.backgroundColor='rgb('+num1*5+','+num2*29+','+num3*15+')';
//为每一个li添加点击事件
lis[i].onclick=function(){
lis[curIndx].style.borderWidth='1px';
this.style.borderWidth='2px';
o.style.backgroundColor=this.style.backgroundColor;
//修改curIndex
curIndx=this.index;
};
}
function getNum() {
var num=parseInt(Math.random()*40);//产生0-40之间的整数
return num;
}
</script>
</body>
</html>
例（2）级菜单显现隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin: 0;padding: 0;}
ul{list-style: none;}
.itm{display: block;float: left;width: 80px;background: #555;
text-align: center;line-height: 30px;margin-left: 10px;}
.itm:hover{background: #888;cursor: pointer;}
.itm ul li{
width: 80px;
line-height: 30px;
background: #f90;
}
.itm ul li:hover{background: #f30;cursor: pointer;}
.itm ul{display: none;}
</style>
</head>
<body>
<ul id="box">
<li class="itm">AAAA
<ul>
<li>aaaa</li>
<li>aaaa</li>
<li>aaaa</li>
<li>aaaa</li>
</ul>
</li>
<li class="itm">BBBB
<ul>
<li>bbbb</li>
<li>bbbb</li>
<li>bbbb</li>
<li>bbbb</li>
</ul>
</li>
<li class="itm">CCCC
<ul>
<li>cccc</li>
<li>cccc</li>
<li>cccc</li>
<li>cccc</li>
</ul>
</li>
<li class="itm">DDDD
<ul>
<li>dddd</li>
<li>dddd</li>
<li>dddd</li>
<li>dddd</li>
</ul>
</li>
</ul>
<script type="text/javascript">
//获取页面元素的所有子元素
var os = document.getElementById('box').children;
for(i=0;i<os.length;i++){
//添加鼠标事件
os[i].onmouseenter=function(){
var oul=this.children[0];
oul.style.display='block';
}
os[i].onmouseleave=function(){
var oul=this.children[0];
oul.style.display='none';
}
}
</script>
</body>
</html>
例（3）上下左右移动动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin: 0;padding: 0;}
div{width: 100px;height: 100px;background: #f60;position: absolute;top: 100px;left: 0px;
border-radius: 50%;border: 1px solid #000;}
</style>
</head>
<body>
<button id="btn-left">向左</button>
<button id="btn-right">向右</button>
<button id="btn-top">向上</button>
<button id="btn-bottom">向下</button>
<div id="box"></div>
<script type="text/javascript">
(1)
var s=document.getElementById('box');
var add=2;//速度
var timer;//定时器编号
//向左
document.getElementById('btn-left').onclick=function(){
clearInterval(timer);
timer = setInterval(show,20,-add);
};
//向右
document.getElementById('btn-right').onclick=function(){
clearInterval(timer);
timer = setInterval(show,20,add);
};
//向上
document.getElementById('btn-top').onclick=function(){
clearInterval(timer);
timer = setInterval(show1,20,-add);
};
//向下
document.getElementById('btn-bottom').onclick=function(){
clearInterval(timer);
timer = setInterval(show1,20,add);
};
function show(add){
var dis=window.getComputedStyle(s,null).left;
dis=parseInt(dis);
s.style.left=dis+add+'px';
}
function show1(add){
var di=window.getComputedStyle(s,null).top;
di=parseInt(di);
s.style.top=di+add+'px';
}
</script>
</body>
</html>
例（4）小球移动一定距离停止
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#box{width: 100px;height: 100px;border-radius: 50%;background: skyblue;position: absolute;left: 0;top: 100px;}
#wall{width: 2px;height:500px;position: absolute;left: 500px;background: #000;}
</style>
</head>
<body>
<button id="btn">开始</button>
<div id="box"></div>
<div id="wall"></div>
<script type="text/javascript">
var o=document.getElementById('box');
var wa=document.getElementById('wall');
//1.获取小球宽度
var dis=parseInt(window.getComputedStyle(o,null).width);//祛除单位
//2.墙的左边距
var ml=parseInt(window.getComputedStyle(wa,null).left);
//3.小球移动时最大左边距
var max1=ml-dis;
var sppen=2;//速度
var s1;
//点击开始按钮，小球开始移动，碰到墙时，停下来
document.getElementById('btn').onclick=function(){
s1=setInterval(show,20)
}
//移动
function show(){
var ds=parseInt(window.getComputedStyle(o,null).left);
//遇到墙了
if (ds>=max1) {
clearInterval(s1)
}else{
//修改left值
o.style.left=ds+sppen+'px';
}
}
</script>
</body>
</html>
上一篇： 1.简单的建立 UDP 传输
下一篇： Android学习之下拉列表