javascript-行間樣式,提取行間事件,while/for,全選/反選/取消,選項卡,innerHTML
行爲、樣式、結構分離（JS/CSS/HTML）html
一、不要加行間樣式；數組
二、不要加行間事件ide
1、行間樣式函數
<!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>
二、樣式優先級帶來的問題this
通配符* < 標籤 < class < id < 行間樣式htm
先變綠，再變紅；有效事件
<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>ip
先變紅，再變綠；失效utf-8
<div id="div1"></div> --> <div id="div1" style="background: red none repeat scroll 0% 0%;"></div> ---> <div id="div1" style="background: red none repeat scroll 0% 0%;" class="color_green"></div>get
建議：一直使用同一個class或者style
2、提取行間事件
<!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.onclick=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.onclick=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.onload=function(){
var ob=document.getElementById('b1');
// ob.onclick=abc
// function abc(){
// alert('abc')
// }
ob. () {alert('abc')}
}
}
</script>
</meta>
</head>
<body>
<input id="b1" type="button" value="按鈕">
</input>
</body>
</html>
3、獲取元素數組：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.onload=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>
4、全選、反選、取消
<!DOCTYPE doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>
Document
</title>
</meta>
</head>
<script>
window.onload=function(){
var ob1=document.getElementById('b1');
ob1.onclick=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.onclick=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.onclick=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>
5、選項卡
this：當前事件的元素
<!DOCTYPE doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>
Document
</title>
<script>
window.onload=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].onclick=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>
6、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.onload=function(){
var ot=document.getElementById('t1')
var ob=document.getElementById('b1')
var od=document.getElementById('div1')
//能夠輸入html：<h1>標題</h1> <p>內容</p>
ob.onclick=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>
相關文章
- 1. javascript實現全選/取消全選，反選/取消反選
- 2. javascript 複選框 全選 全取消
- 3. jquery實現全選，反選，取消
- 4. JavaScript 行間事件、提取行間事件
- 5. jQuery全選取消全選
- 6. 全選/取消全選
- 7. 全選 取消全選
- 8. 複選框全選、取消全選、反選操做
- 9. javaScript選框的全選與取消
- 10. [複選框] 全選、取消全選、自動勾選或取消全選按鈕
- 更多相關文章...
- • ionic tab(選項卡) - ionic 教程
- • ionic 選項卡欄操作 - ionic 教程
- • 爲了進字節跳動，我精選了29道Java經典算法題，帶詳細講解
- • 再有人問你分佈式事務，把這篇扔給他
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 升級Gradle後報錯Gradle‘s dependency cache may be corrupt (this sometimes occurs
- 2. Smarter, Not Harder
- 3. mac-2019-react-native 本地環境搭建(xcode-11.1和android studio3.5.2中Genymotion2.12.1 和VirtualBox-5.2.34 )
- 4. 查看文件中關鍵字前後幾行的內容
- 5. XXE萌新進階全攻略
- 6. Installation failed due to: ‘Connection refused: connect‘安卓studio端口占用
- 7. zabbix5.0通過agent監控winserve12
- 8. IT行業UI前景、潛力如何？
- 9. Mac Swig 3.0.12 安裝
- 10. Windows上FreeRDP-WebConnect是一個開源HTML5代理，它提供對使用RDP的任何Windows服務器和工作站的Web訪問
歡迎關注本站公眾號,獲取更多信息
相關文章