javascript-行间样式,提取行间事件,while/for,全选/反选/取消,选项卡,innerHTML

最新推荐文章于 2021-09-28 20:12:15 发布

weixin_34130269

最新推荐文章于 2021-09-28 20:12:15 发布

阅读量67

点赞数

原文链接：http://blog.51cto.com/f1yinsky/1934270

版权

行为、样式、结构分离（JS/CSS/HTML）

1、不要加行间样式；

2、不要加行间事件

一、行间样式

<!DOCTYPE doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>
        Document
        </title>
        <style>
        #div1 {width: 200px;height: 200px;border: 1px solid black;}
        </style>
        <script>
        function toRed()
        {
        var oDiv=document.getElementById('div1');
        oDiv.style.background='red';  // style操作行间样式
        }
        </script>
        </meta>
    </head>
    <body>
        <input type="button" value="变红"/>
        <div id="div1">
        </div>
        <div id="div1" style="background: red none repeat scroll 0% 0%;">
        </div>
    </body>
</html>

2、样式优先级带来的问题

通配符* < 标签 < class < id < 行间样式

先变绿，再变红；有效

<div id="div1"></div> --> <div id="div1" class="color_green"></div> ---> <div id="div1" class="color_green" style="background: red none repeat scroll 0% 0%;"></div>

先变红，再变绿；失效

建议：一直使用同一个class或者style

二、提取行间事件

<!DOCTYPE doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>
    Document
    </title>
    </meta>
  </head>
  <body>
    <input id="b1" type="button" value="按钮">
    <script>
    var ob=document.getElementById('b1');
    // 第一种：调用行距时间方法
    // ob.οnclick=abc
    // function abc(){
    //  alert('abc')
    // }
    
    //第二种：匿名函数（
    ob. () {alert('abc')}
    </script>
    </input>
  </body>
</html>

script 在body之前，出现加载错误；正确使用window.onload函数

错误示例：

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<script>
		var ob=document.getElementById('b1');
		// ob.οnclick=abc
		// function abc(){
		//  alert('abc')
		// }
		ob. () {alert('abc')}
		</script>
		
	</head>
	<body>
		<input type="button" id="b1" value="按钮">
	</body>
</html>

正确示例：

<!DOCTYPE doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>
        Document
        </title>
        <script>
        //  ---> 页面加载完成后再执行
        window.οnlοad=function(){
        var ob=document.getElementById('b1');
        // ob.οnclick=abc
        // function abc(){
        //  alert('abc')
        // }
        ob. () {alert('abc')}
        }
        }
        
        </script>
        </meta>
    </head>
    <body>
        <input id="b1" type="button" value="按钮">
        </input>
    </body>
</html>

三、获取元素数组：getElementsByTagName；循环while/for

<!DOCTYPE doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
            <title>
                Document
            </title>
            <style>
                div {width: 200px;height: 200px;float: left;border: 1px solid black;margin: 10px;}
            </style>
            <script>
                window.οnlοad=function(){
				   //数组
				   var arr_div=document.getElementsByTagName('div')

				   // alert(arr_div.length)   --->  元素数量

				   //while循环
				   // var i=0
				   // while(i<arr_div.length){
				   //  arr_div[i].style.background="red";
				   //  i++;
				   // }

				   //for循环
				   for(var i=0;i<arr_div.length;i++){
				    arr_div[i].style.background='green'
				   }

				}
            </script>
        </meta>
    </head>
    <body>
        <div>
        </div>
        <div>
        </div>
        <div>
        </div>
        <div>
        </div>
    </body>
</html>

四、全选、反选、取消

<!DOCTYPE doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>
		Document
		</title>
		</meta>
	</head>
	<script>
	window.οnlοad=function(){
			var ob1=document.getElementById('b1');
			ob1.οnclick=function(){
			var arr_div=document.getElementById('div1').getElementsByTagName('input')
			for(var i=0;i<arr_div.length;i++){
				arr_div[i].checked=true
				}
				}
				var ob2=document.getElementById('b2');
				ob2.οnclick=function(){
				var arr_div=document.getElementById('div1').getElementsByTagName('input')
				for(var i=0;i<arr_div.length;i++){
					arr_div[i].checked=false
					}
					}
					var ob3=document.getElementById('b3')
					ob3.οnclick=function(){
					var arr_div=document.getElementById('div1').getElementsByTagName('input')
					for(var i=0;i<arr_div.length;i++){
						arr_div[i].checked=!arr_div[i].checked
						}
						}
						}
				</script>
				<body>
					<input id="b1" type="button" value="全选">
					<input id="b2" type="button" value="取消">
					<input id="b3" type="button" value="反选">
					<div id="div1">
						<!--  常用技巧，外层套一个div -->
						<input type="checkbox">
						<input type="checkbox">
						<input type="checkbox">
						<input type="checkbox">
						<input type="checkbox">
						<input type="checkbox">
						<input type="checkbox">
						<input type="checkbox">
						<input type="checkbox">
						<input type="checkbox">
						</input>
						</input>
						</input>
						</input>
						</input>
						</input>
						</input>
						</input>
						</input>
						</input>
					</div>
					'
					</input>
					</input>
					</input>
				</body>
			</html>

五、选项卡

this：当前事件的元素

<!DOCTYPE doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>
		Document
		</title>
		<script>
		window.οnlοad=function(){
						var ob=document.getElementById('div1').getElementsByTagName('input')
						var od=document.getElementById('div1').getElementsByTagName('div')
						
						//所有按钮添加事件及属性
						for(var i=0;i<ob.length;i++){
						ob[i].index=i;  //新增按钮属性
						ob[i].οnclick=function(){
						for(var i=0;i<ob.length;i++){
						ob[i].className=""
						od[i].style.display="none"
						}
						this.className='active'
						od[this.index].style.display='block'
						}
						}
						}
		</script>
		<style>
		#div1 .active {background: yellow;}
						#div1 div {width: 200px;height: 200px;border: 1px solid black;display: none;}
		</style>
		</meta>
	</head>
	<body>
		<div id="div1">
			<input id="b1" type="button" value="教育">
			<input id="b2" type="button" value="培训">
			<input id="b3" type="button" value="招生">
			<input id="b4" type="button" value="出国">
			<div>
				1
			</div>
			<div>
				22
			</div>
			<div>
				333
			</div>
			<div>
				4444
			</div>
			</input>
			</input>
			</input>
			</input>
		</div>
	</body>
</html>

六、innerHTML

<!DOCTYPE doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>
		Document
		</title>
		<style>
		#div1 {width: 200px;height: 150px;border: 1px solid black;}
		</style>
		<script>
		window.οnlοad=function(){
						var ot=document.getElementById('t1')
						var ob=document.getElementById('b1')
						var od=document.getElementById('div1')
						//可以输入html：<h1>标题</h1> <p>内容</p>
						ob.οnclick=function(){
						od.innerHTML=ot.value
						}
						}
		</script>
		</meta>
	</head>
	<body>
		<input id="t1" type="text">
		<input id="b1" type="button" value="按钮">
		<div id="div1">
		</div>
		</input>
		</input>
	</body>
</html>

转载于:https://blog.51cto.com/f1yinsky/1934270

weixin_34130269

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript-行间样式,提取行间事件,while/for,全选/反选/取消,选项卡,innerHTML

行为、样式、结构分离（JS/CSS/HTML）1、不要加行间样式；2、不要加行间事件一、行间样式<!DOCTYPEdoctypehtml><htmllang="en"><head><metacharset="utf-8"><title>Docu...
复制链接

扫一扫