版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
改变样式属性：
style属性
语法：HTML元素.style.样式属性=“值”；
| 类别 | 属性 |
| 文本 | fontSize、fontWright、textAligh、color...... |
| 边距 | padding、paddingTop、paddingBottom、paddingRight、paddingLeft |
| 背景 | backgroundColor、backgroundImage...... |
| 边框 | border...... |
案例：实现切换图片效果以及改变边框样式等
html页面：
<body>
<div>
<img src="img/1.jpg" id="pic">
</div>
<ul id="list">
<li><img src="img/1.jpg"></li>
<li><img src="img/2.jpg"></li>
<li><img src="img/3.jpg"></li>
<li><img src="img/13.jpg"></li>
</ul>
</body>
css样式：
<style>
div img {height: 450px;
width: 360px;}
ul,li{
list-style: none;
margin-left: 0px;
padding: 0px;
}
ul li{height: 100px;
width: 80px;
float: left;
margin-right: 10px;
border: 1px solid #ccc;
}
ul>li>img{
height: 100px;
width: 80px;
}
ul li:hover{cursor: pointer;}
</style>js代码：
<script>
var lis=document.getElementById('list').children;
var img=document.getElementById('pic');
for(var i=0,len=lis.length;i<len;i++){
lis[i].onmouseover=function(){
this.style.borderColor='red';
console.log('aaa');
this.style.borderWidth='3px';
// this.style.borderWidth='2px';
img.src=this.children[0].src;
}
lis[i].onmouseout=function(){
this.style.borderColor='#ccc';
this.style.borderWidth='1px';
}
}
</script>效果图：将鼠标放到li时，上边的div会展示li的图片，li也会有红色边框
