Topic 1 : 标签的自定义属性

代码示例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>自定义属性</title>
	<style>
		.bg {
		  background-color: red;
		}
    </style>
</head>
<body>
   <div id="box" stuId="1">张三</div> <a href="#">删除</a>

  <script>
     var o = {};
     console.log(o.a);  // 当访问对象中不存在的属性，返回undefined
    var box = document.getElementById('box');
    // 在chrome中不能使用这种方式获取标签的自定义属性
	 //以前的iE可以
    console.log(box.stuId);

    // 获取标签对应的自定义属性
    // console.log(box.getAttribute('stuId'));
    // 也可以获取标签本身具有的属性
    // console.log(box.getAttribute('id'));


    // 设置标签的自定义属性
    // box.setAttribute('test', 'hello');
    // // 设置标签本身具有的属性
    // box.setAttribute('class', 'bg');

    // // 移除属性
    // box.removeAttribute('test');
    // box.removeAttribute('class');


    
    box.abc = 'hello';
	// 这样写不可以设置标签的自定义属性，但是box（元素 元素既是对象）对象本身具有了abc属性  可以打印出来
	//因为JavaScript的动态特性
    console.log(box.abc);
  </script>
</body>
</html>

Topic 2 : 样式操作

1 . 设置类样式

2 . 设置style

代码示例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>样式操作</title>
	<style>
		.aha {
		  width: 200px;
		  height: 200px;
		  background-color: red;
		}	
	</style>
</head>

<body>
	<div id="aha" ></div>
  <script>
    var aha = document.getElementById('aha');
    // 样式操作
    // 1 设置类样式
    aha.className = 'aha';
    // 2 设置style
	//注意这里必须要加px这个单位   而且‘’号要注意
    aha.style.width = '500px';
    aha.style.height = '500px';
    aha.style.backgroundColor = 'yellow';

    //cssText 获取标签的style属性中的字符串
    console.log(aha.style.cssText);
	
	//这个的样式就跟在title下面写的 css/text 一样   只不过这个地方是‘’ 而那里是{}
    aha.style.cssText = 'width: 200px; height: 200px; background-color: yellow;';


    // 如果设置的样式属性比较多的时候  推荐使用class
    // 如果设置的样式属性比较少   推荐使用style
  </script>
</body>
</html>

Topic 3 :开关灯操作 ;

功能：就是我们浏览器的那种背景变黑的操作；

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>开关灯</title>
</head>

<body>
	<input type="button" id="btn" value="关灯">
	<script>
		//开关灯的问题  其实就是设置body的背景颜色
		//获取这个按钮给这个按钮设置注册事件
		//设置一个变量来记录开灯  和关灯这两件事情
		var isOpen = true; //这个可不能定义到点击事件里面去要不然每次点击都会被定义成true；
		var btn = document.getElementById('btn');
		btn.onclick = function () {
			if (isOpen) {
				isOpen = false;
				this.value = '关灯';
				//设是style样式
				document.body.style.backgroundColor = 'black';
			} else {
				isOpen = true;
				this.value = '开灯';
				document.body.style.backgroundColor = '';
			}
		}
	
	</script>
</body>
</html>

Topic 4 : 二维码显示操作 ;

方法 1 ：

设置类样式

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>二维码操作</title>
	<style	type="text/css">
		.small{ width: 50px; height: 50px; position: fixed; background: url(images/bgs.png) -159px -50px; top: 40%; right: 10px; }
		.big{ position: absolute; top: 0px; left: -150px; }
		.hide {
            display: none;
        }
        .show {
            display: block;
        }
	</style>
</head>

<body>
	<div id="small" class="small">
<!--		注意这个class的意思是同时继承了big  和hide两个类的设置-->
		<div id="big" class="big hide">
			 <img src="images/456.png" width="149" height="152" alt=""/>
		</div>
	</div>

	<script>
		// 获取small 注册事件  鼠标经过的事件onmouseover  鼠标离开的事件 onmouseout
		var small = document.getElementById('small');
		var big = document.getElementById('big');
		small.onmouseover = function () {
			//鼠标在上面就是  显示   
			//   注意  我们的这个className如果不写成 big show  他就没法继承big里面的设置  这一点要特别注意
			//  还有就是class的优先级没有id的优先级高
			big.className = 'big show';
		}
		small.onmouseout = function () {
			//鼠标在上面就是  显示
			// 注意我们的这个
			//big.className = 'big hide';
			// 有时候我们的这个元素可能有很多类来控制我们可以改变他的单独的哪个类
			//  其本质就是字符串的改变  所以我们可以用字符串的替换   把show换成hide
			big.className = big.className.replace('show','hide');
		}
	</script>
</body>
</html>

方法 2 ：

设置style

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>二维码操作</title>
	<style	type="text/css">
		.small{ width: 50px; height: 50px; position: fixed; background: url(images/bgs.png) -159px -50px; top: 40%; right: 10px; }
		.big{ position: absolute; top: 0px; left: -150px; }
		.hide {
            display: none;
        }
        .show {
            display: block;
        }
	</style>
</head>

<body>
	<div id="small" class="small">
<!--		注意这个class的意思是同时继承了big  和hide两个类的设置-->
		<div id="big" class="big hide">
			 <img src="images/456.png" width="149" height="152" alt=""/>
		</div>
	</div>

	<script>
		// 获取small 注册事件  鼠标经过的事件onmouseover  鼠标离开的事件 onmouseout
		var small = document.getElementById('small');
		var big = document.getElementById('big');
		small.onmouseover = function () {
			big.style.display = 'block';
		}
		small.onmouseout = function () {
			big.style.display = 'none';
		}
	</script>
</body>
</html>

Topic 5 : div样式操作

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>div样式操作</title>
	<style type="text/css">
		#aha { width: 100px; height: 100px; background: pink;}
		/*我们在这里写一个类的样式  是毫无意义的  因为  这个本来是用id选择器写的  id选择
		器的优先级高于类选择器  所以我们用类选择器改变不了他*/
		.aha {}
	</style>
</head>

<body>
<!--	这个button是HTML5中新增的-->
	<button id="btn">点我改变盒子</button>
	<div id="aha" class="aha"></div>
	<script>
		var flag = true;
		var btn = document.getElementById('btn');
		btn.onclick = function () {
			if(flag){
				flag = false;
				aha.style.width = '200px';
				aha.style.height = '200px';
				aha.style.backgroundColor = 'red';
			} else {
				flag = true;
				aha.style.cssText = ' width: 100px; height: 100px; background: pink; ';
			}
		}
	</script>
</body>
</html>

Topic 6 : 隔行变色高亮显示

网页示例：

代码示例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>隔行变色高亮显示</title>
</head>

<body>
	<ul id="aha">
		<li>王亚杰</li>
		<li>阿毛</li>
		<li>阿狗</li>
		<li>系哦啊里霜</li>
		<li>小李爽</li>
	</ul>
	<script>
		//隔行变色  
		var color;  //用于记录这一行本来的颜色  高亮显示的时候用
		var lis = document.querySelectorAll('#aha li');
		var len = lis.length;
		for (var i = 0; i < len; i++) {
			if (i % 2 === 0) {
				lis[i].style.backgroundColor = 'yellow';
			} else {
				lis[i].style.backgroundColor = 'red';
			}
		}
		for (var i = 0; i < len; i++) {
			lis[i].onmouseover = function () {
				color = this.style.backgroundColor;
				this.style.backgroundColor = 'green';
			}
			lis[i].onmouseout = function () {
				this.style.backgroundColor = color;
			}
		}
	</script>
</body>
</html>

注意：

1 . position:absolute是绝对定位，其实position:fixed也是绝对定位的一种扩展或者说变型。两者都脱离了文档流，但是又有很大的不同点，那就是position:fixed定位的元素会固定原来的位置不变，无论如何拖动滚动条，从fixed这个英文单词的意思也可以看出。

2 . id选择器的优先级是高于类选择器的；

3 . 脱离文档流加绝对定位也是一种方式

JavaScript_案例_标签的自定义属性_样式操作_开关灯操作_二维码显示操作_div样式操作_隔行变色高亮显示_Unit_6;

Topic 1 : 标签的自定义属性

Topic 2 : 样式操作

Topic 3 :开关灯操作 ;

Topic 4 : 二维码显示操作 ;

Topic 5 : div样式操作

Topic 6 : 隔行变色高亮显示

猜你喜欢