js对样式的操作
本文有：对某个事件的来回操作实现对css样式的来回修改 。比如实现hover效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div id="box">魔降风云变</div>
<script type="text/javascript">
// 1.获取事件源对象
// var box = document.getElementById('box');
// 2.绑定事件
/* box.onmouseover = function (){
// 3.让标签的背景色变绿
box.style.backgroundColor = 'green';
box.style.fontSize = '30px';
}
box.onmouseout = function (){
// 3.让标签的背景色变绿
box.style.backgroundColor = 'red';
box.style.fontSize = '16px';
} */
// var isRed = true;
// box.onclick = function(){
// if(isRed){
// this.style.backgroundColor = 'green';
// isRed = false;
// }else{
// this.style.backgroundColor = 'red';
// isRed = true;
// }
// }
</script>
</body>
</html>
1、
1.1
没有js的时候
1.2
// 1.获取事件源对象 var box = document.getElementById('box'); // 2.绑定事件 box.onmouseover = function (){ // 3.让标签的背景色变绿 box.style.backgroundColor = 'green'; box.style.fontSize = '30px'; }
鼠标经过图，让图变绿，字体变大。使用js修改css样式
1）获取事件源，事件源就是要修改css的标签代码段；
2）绑定事件 对象.onmouseover =function(){} 匿名函数。
3）匿名函数中对象.样式.属性=‘新值’ ，修改颜色和字体。属性带-的去掉-并将-后第一个字母大写。驼峰体。
上面的改变就回不去了，只有刷新网页才能变回原来的样子。
1.3、两段代码js实现伪类选择器hover的效果
// 1.获取事件源对象 var box = document.getElementById('box'); // 2.绑定事件 box.onmouseover = function (){ // 3.让标签的背景色变绿 box.style.backgroundColor = 'green'; box.style.fontSize = '30px'; } box.onmouseout = function (){ // 3.让标签的背景色变绿 box.style.backgroundColor = 'red'; box.style.fontSize = '16px'; }
鼠标未覆盖
鼠标覆盖，能实现不断的切换了。
1.4、但是这里有代码冗余。修改一下，加个标志，
var box = document.getElementById('box'); var isRed = true; box.onclick = function(){ if(isRed){ this.style.backgroundColor = 'green'; isRed = false; }else{ this.style.backgroundColor = 'red'; isRed = true; } }
未点击：
点击。能实现每次点击实现颜色切换
