整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
1.當(dāng)我們把文本域里面的值賦值給 li 的時(shí)候，多 添加一個(gè)刪除的鏈接
2.需要把所有的鏈接獲取過來，當(dāng)我們點(diǎn)擊當(dāng)前鏈接的時(shí)候，刪除當(dāng)前鏈接所在的 li
3.我們只需要在之前寫的那個(gè)版面上添加一段刪除元素的代碼就行了
一開始css的浮動(dòng)，其本質(zhì)是用來做一些文字混排效果的，但是后來被我們拿來做布局用，就出現(xiàn)了很多問題。
清除浮動(dòng)的本質(zhì)： 為解決父級(jí)元素因?yàn)樽蛹?jí)浮動(dòng)引起高度為0的問題
我們很多時(shí)候不方便給父盒子的高度，因?yàn)槲覀儾磺宄卸嗌僮雍凶樱卸嗌賰?nèi)容。經(jīng)常的做法會(huì)讓內(nèi)容撐開父盒子的高度。 但是如果父盒子中有子盒子浮動(dòng)了之后，就會(huì)影響到后面的盒子，因?yàn)楦?dòng)元素脫離了標(biāo)準(zhǔn)流。會(huì)把后面還在標(biāo)準(zhǔn)流的盒子覆蓋，解決這個(gè)問題的方法就要清除浮動(dòng)
原理圖
清除浮動(dòng)其實(shí)叫做 閉合浮動(dòng) 更合適，因?yàn)槭前迅?dòng)的元素圈起來，讓父元素閉合出口和入口不讓他們出來影響其他的元素。 在CSS中，clear屬性用于清除浮動(dòng)，其基本語(yǔ)法格式如下：
選擇器 { clear : 屬性值 ; }
/*屬性值為left,清除左側(cè)浮動(dòng)的影響
屬性值為right,清除右側(cè)浮動(dòng)的影響
屬性值為both,同時(shí)清除左右兩側(cè)浮動(dòng)的影響*/
復(fù)制代碼通過在浮動(dòng)元素的末尾添加一個(gè)空的標(biāo)簽。這是W3C推薦的做法，雖然比較簡(jiǎn)單，但是添加了無意義的標(biāo)簽，結(jié)構(gòu)化比較差，所以不推薦使用。下面三種寫法都適用：
<!--寫法一：直接用style-->
<div style="clear:both"></div>
<!--寫法二：使用clear類-->
<style>
.clear { clear:both }
</style>
<div class="clear"></div>
<!--寫法三：可以使用br等別的塊級(jí)元素來清除浮動(dòng)-->
<style>
.clear { clear:both }
</style>
<br class="clear" />把div放進(jìn)父盒子里，這樣盒子會(huì)撐開，一般也不會(huì)用。
給父級(jí)元素添加overflow樣式方法。
這種方法代碼比較簡(jiǎn)潔，可以通過觸發(fā)BFC方式，但是因?yàn)楸旧韔verflow的本質(zhì)是 溢出隱藏 的效果，所以有的時(shí)候也會(huì)有一些問題存在，比如內(nèi)容增多的時(shí)候不會(huì)自動(dòng)換行導(dǎo)致內(nèi)容被隱藏掉，無法顯示出要溢出的元素。
.father {
overflow: auto;
/* 加上這句話，就可以清除浮動(dòng) overflow = hidden|auto|scroll 都可以實(shí)現(xiàn)*/
}
復(fù)制代碼after是在父元素中加一個(gè)盒子，這個(gè)元素是通過css添加上去的，符合閉合浮動(dòng)思想，結(jié)構(gòu)語(yǔ)義化正確。 父元素中加一個(gè)類名為clearfix 。但是這個(gè)方法IE6-IE7不識(shí)別，要進(jìn)行兼容，使用zoom:1觸發(fā)hasLayout來清除浮動(dòng)
代表網(wǎng)站：百度、淘寶、網(wǎng)易等
.clearfix:after{
content:"."; /*盡量不要為空，一般寫一個(gè)點(diǎn)*/
height:0; /*盒子高度為0，看不見*/
display:block; /*插入偽元素是行內(nèi)元素，要轉(zhuǎn)化為塊級(jí)元素*/
visibility:hidden; /*content有內(nèi)容，將元素隱藏*/
clear:both;
}
.clearfix {
*zoom: 1; /* *只有IE6,7識(shí)別 */
}
復(fù)制代碼父元素中加一個(gè)類名為clearfix，也需要兼容IE6-IE7
在Unicode字符里有一個(gè)“零寬度空格”，即U+200B，代替“.”，可以減少代碼量，不再使用visibility:hidden
代表網(wǎng)站：阿里巴巴
.clearfix::after{
content:"\200B"; /* content:'\0200'; 也可以 */
display:block;
height:0;
clear:both;
}
.clearfix {
*zoom: 1;
}
復(fù)制代碼這種方法完全符合閉合浮動(dòng)思想。給父元素加一個(gè)類名為clearfix,需要兼容IE6-IE7
代表網(wǎng)站：小米、騰訊
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
復(fù)制代碼?copyright burning.
最后在這里說一下，目前在職web前端開發(fā)，如果你現(xiàn)在在學(xué)習(xí)web前端，在整個(gè)前端入門的學(xué)習(xí)過程當(dāng)中，有遇見任何關(guān)于學(xué)習(xí)方法，學(xué)習(xí)路線，學(xué)習(xí)效率等方面的問題，或者缺乏基礎(chǔ)入門的視頻教程，前端面試題，學(xué)習(xí)手冊(cè)，開發(fā)工具，PDF文檔書籍教程，都可以隨時(shí)關(guān)注并私信我：前端 ，系統(tǒng)自動(dòng)堅(jiān)持會(huì)發(fā)送交流圈子，可以來自行獲取下載。
作者：頑皮的雪狐七七
鏈接：https://juejin.cn/post/6901903789197197325
來源：掘金
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="style/css.css" />
<script>
/*
參數(shù)：
id 要綁定單擊事件的按鈕的id
callback 事件的響應(yīng)函數(shù)
*/
function myClick(id, callback){
var btn = document.getElementById(id);
btn.onclick = callback;
}
window.onload = function () {
//創(chuàng)建廣州節(jié)點(diǎn)
var gz = document.createElement('li');
var txt = document.createTextNode('廣州');
gz.appendChild(txt);
// 創(chuàng)建一個(gè)"廣州"節(jié)點(diǎn),添加到#city下
myClick('btn01',function () {
// <li>廣州</li>
// 創(chuàng)建一個(gè)li元素節(jié)點(diǎn)對(duì)象
// document.createElement() 用來根據(jù)標(biāo)簽名創(chuàng)建一個(gè)元素節(jié)點(diǎn)對(duì)象
// var gz = document.createElement('li');
// 創(chuàng)建一個(gè)"廣州"文本節(jié)點(diǎn)對(duì)象
// document.createTextNode() 用來根據(jù)一個(gè)文本內(nèi)容創(chuàng)建一個(gè)文本節(jié)點(diǎn)對(duì)象
// var txt = document.createTextNode('廣州');
// 將txt設(shè)置為gz的子節(jié)點(diǎn)
// 父節(jié)點(diǎn).appendChild(子節(jié)點(diǎn)) 將一個(gè)節(jié)點(diǎn)設(shè)置為另一個(gè)節(jié)點(diǎn)的子節(jié)點(diǎn)
// gz.appendChild(txt);
// 獲取id為city的元素
var city = document.getElementById('city');
// 將gz添加到city中
city.appendChild(gz);
});
// 將"廣州"節(jié)點(diǎn)插入到#bj前面
myClick('btn02',function () {
//獲取bj節(jié)點(diǎn)
var bj = document.getElementById('bj');
var gz = document.createElement('li');
var txt = document.createTextNode('廣州');
gz.appendChild(txt);
/*
父節(jié)點(diǎn).insertBefore(前邊的節(jié)點(diǎn), 后邊的節(jié)點(diǎn))
- 用來將一個(gè)節(jié)點(diǎn)插入到指定節(jié)點(diǎn)前邊
*/
// 獲取id為city的元素
var city = document.getElementById('city');
city.insertBefore(gz, bj);
});
// 使用"廣州"節(jié)點(diǎn)替換#bj節(jié)點(diǎn)
myClick('btn03',function () {
//獲取bj節(jié)點(diǎn)
var bj = document.getElementById('bj');
//創(chuàng)建廣州節(jié)點(diǎn)
var gz = document.createElement('li');
var txt = document.createTextNode('廣州');
gz.appendChild(txt);
//獲取id為city的元素
var city = document.getElementById('city');
/*
父節(jié)點(diǎn).replaceChild(新節(jié)點(diǎn), 舊節(jié)點(diǎn))
- 使用一個(gè)新的節(jié)點(diǎn)替換舊節(jié)點(diǎn)
*/
city.replaceChild(gz, bj);
});
// 刪除#bj節(jié)點(diǎn)
myClick('btn04',function () {
// 獲取id為bj的元素
var bj = document.getElementById('bj');
// 獲取id為city的元素
var city = document.getElementById('city')
// 父節(jié)點(diǎn).removeChild(子節(jié)點(diǎn))
// city.removeChild(bj);
// 子節(jié)點(diǎn).parentNode.removeChild(子節(jié)點(diǎn))
bj.parentNode.removeChild(bj);
});
// 讀取#city內(nèi)的HTML代碼
myClick('btn05',function () {
var city = document.getElementById('city');
alert(city.innerHTML);
});
// 設(shè)置#bj內(nèi)的HTML代碼
myClick('btn06',function () {
var bj = document.getElementById('bj');
bj.innerHTML = '深圳';
});
// 創(chuàng)建一個(gè)"廣州"節(jié)點(diǎn),添加到#city下
myClick('btn07',function () {
// 獲取city
var city = document.getElementById('city');
// 修改city的innerHTML
// city.innerHTML += '<li>廣州</li>';
// 創(chuàng)建一個(gè)li元素
var gz = document.createElement('li');
// 設(shè)置gz中的文本內(nèi)容
gz.innerHTML = '廣州';
// 將li設(shè)置city的子節(jié)點(diǎn)
city.appendChild(gz);
});
//為bj綁定一個(gè)單擊響應(yīng)函數(shù)
var bj = document.getElementById('bj');
bj.onclick = function () {
alert(123);
};
};
</script>
</head>
<body>
<div id="total">
<div class="inner">
<p>
你喜歡哪個(gè)城市?
</p>
<ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>東京</li>
<li>首爾</li>
</ul>
</div>
</div>
<div id="btnList">
<div><button id="btn01">創(chuàng)建一個(gè)"廣州"節(jié)點(diǎn),添加到#city下</button></div>
<div><button id="btn02">將"廣州"節(jié)點(diǎn)插入到#bj前面</button></div>
<div><button id="btn03">使用"廣州"節(jié)點(diǎn)替換#bj節(jié)點(diǎn)</button></div>
<div><button id="btn04">刪除#bj節(jié)點(diǎn)</button></div>
<div><button id="btn05">讀取#city內(nèi)的HTML代碼</button></div>
<div><button id="btn06">設(shè)置#bj內(nèi)的HTML代碼</button></div>
<div><button id="btn07">創(chuàng)建一個(gè)"廣州"節(jié)點(diǎn),添加到#city下</button></div>
</div>
</body>
</html><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>添加刪除記錄練習(xí)</title>
<link rel="stylesheet" type="text/css" href="ex_2_style/css.css" />
<script type="text/javascript">
window.onload = function () {
// 將刪除tr的函數(shù)單獨(dú)提取
function delA() {
// 刪除員工 點(diǎn)擊哪個(gè)超鏈接，就要?jiǎng)h除哪個(gè)超鏈接所在的tr
// 在這個(gè)響應(yīng)函數(shù)中，點(diǎn)擊哪個(gè)超鏈接，this就是哪個(gè)超鏈接
// alert(this);
// 獲取當(dāng)前超鏈接所在的tr
var tr = this.parentNode.parentNode;
// 獲取被刪除員工的name
// var name = tr.firstElementChild.innerHTML;
// var name = tr.children[0].innerHTML;
var name = tr.getElementsByTagName('td')[0].innerHTML;
//彈出一個(gè)提示框
// confirm() 用來彈出一個(gè)帶有確認(rèn)和取消的對(duì)話框
// confirm() 會(huì)根據(jù)用戶的不同選擇返回不同的值
// 點(diǎn)擊確認(rèn)，返回true，點(diǎn)擊取消返回false
if(confirm('確認(rèn)刪除【'+name+'】嗎？')){
// 刪除tr
tr.parentNode.removeChild(tr);
}
// 點(diǎn)擊超鏈接后，會(huì)發(fā)生頁(yè)面的跳轉(zhuǎn)，這個(gè)是超鏈接的默認(rèn)行為
// 如果不希望發(fā)生默認(rèn)行為，可以在響應(yīng)函數(shù)的最后return 一個(gè) false
// 取消默認(rèn)行為
return false;
}
/*
點(diǎn)擊超鏈接以后，刪除員工
*/
// 獲取所有的超鏈接
var links = document.getElementsByTagName('a');
// 遍歷links
for(var i=0; i<links.length; i++){
// 為超鏈接綁定單擊響應(yīng)函數(shù)
links[i].onclick = delA;
}
/*
點(diǎn)擊提交按鈕后，添加員工
*/
var addEmpButton = document.getElementById('addEmpButton');
addEmpButton.onclick = function () {
// 獲取用戶填寫 姓名 郵件 薪資
var name = document.getElementById('empName').value;
var email = document.getElementById('email').value;
var salary = document.getElementById('salary').value;
/*
<tr>
<td>Tom</td>
<td>tom@tom.com</td>
<td>5000</td>
<td><a href="javascript：;">Delete</a></td>
</tr>
*/
// 創(chuàng)建一個(gè)tr
var tr = document.createElement('tr');
// 創(chuàng)建四個(gè)td
var nameTd = document.createElement('td');
var emailTd = document.createElement('td');
var salaryTd = document.createElement('td');
var aTd = document.createElement('td');
// 創(chuàng)建一個(gè)超鏈接
var link = document.createElement('a');
// 為超鏈接添加屬性
link.href = 'javascript：;';
// 為超鏈接綁定刪除的事件
link.onclick = delA;
// 創(chuàng)建四個(gè)文本節(jié)點(diǎn)
var nameTxt = document.createTextNode(name);
var emailTxt = document.createTextNode(email);
var salaryTxt = document.createTextNode(salary);
var delTxt = document.createTextNode('Delete');
// 將文本節(jié)點(diǎn)添加到元素中
nameTd.appendChild(nameTxt);
emailTd.appendChild(emailTxt);
salaryTd.appendChild(salaryTxt);
link.appendChild(delTxt);
aTd.appendChild(link);
// 將四個(gè)td添加到tr中
tr.appendChild(nameTd);
tr.appendChild(emailTd);
tr.appendChild(salaryTd);
tr.appendChild(aTd);
// 獲取id為employeeTable的table
var tbody = document.querySelector('#employeeTable tbody');
tbody.appendChild(tr);
};
};
</script>
</head>
<body>
<table id="employeeTable">
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th> </th>
</tr>
<tr>
<td>Tom</td>
<td>tom@tom.com</td>
<td>5000</td>
<td><a href="javascript：;">Delete</a></td>
</tr>
<tr>
<td>Jerry</td>
<td>jerry@sohu.com</td>
<td>8000</td>
<td><a href="javascript：;">Delete</a></td>
</tr>
<tr>
<td>Bob</td>
<td>bob@tom.com</td>
<td>10000</td>
<td><a href="deleteEmp?id=003">Delete</a></td>
</tr>
</table>
<div id="formDiv">
<h4>添加新員工</h4>
<table>
<tr>
<td class="word">name: </td>
<td class="inp">
<input type="text" name="empName" id="empName" />
</td>
</tr>
<tr>
<td class="word">email: </td>
<td class="inp">
<input type="text" name="email" id="email" />
</td>
</tr>
<tr>
<td class="word">salary: </td>
<td class="inp">
<input type="text" name="salary" id="salary" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button id="addEmpButton">
Submit
</button>
</td>
</tr>
</table>
</div>
</body>
</html><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>添加刪除記錄練習(xí)</title>
<link rel="stylesheet" type="text/css" href="ex_2_style/css.css" />
<script type="text/javascript">
window.onload = function () {
// 將刪除tr的函數(shù)單獨(dú)提取
function delA() {
// 刪除員工 點(diǎn)擊哪個(gè)超鏈接，就要?jiǎng)h除哪個(gè)超鏈接所在的tr
// 在這個(gè)響應(yīng)函數(shù)中，點(diǎn)擊哪個(gè)超鏈接，this就是哪個(gè)超鏈接
// alert(this);
// 獲取當(dāng)前超鏈接所在的tr
var tr = this.parentNode.parentNode;
// 獲取被刪除員工的name
// var name = tr.firstElementChild.innerHTML;
// var name = tr.children[0].innerHTML;
var name = tr.getElementsByTagName('td')[0].innerHTML;
//彈出一個(gè)提示框
// confirm() 用來彈出一個(gè)帶有確認(rèn)和取消的對(duì)話框
// confirm() 會(huì)根據(jù)用戶的不同選擇返回不同的值
// 點(diǎn)擊確認(rèn)，返回true，點(diǎn)擊取消返回false
if(confirm('確認(rèn)刪除【'+name+'】嗎？')){
// 刪除tr
tr.parentNode.removeChild(tr);
}
// 點(diǎn)擊超鏈接后，會(huì)發(fā)生頁(yè)面的跳轉(zhuǎn)，這個(gè)是超鏈接的默認(rèn)行為
// 如果不希望發(fā)生默認(rèn)行為，可以在響應(yīng)函數(shù)的最后return 一個(gè) false
// 取消默認(rèn)行為
return false;
}
/*
點(diǎn)擊超鏈接以后，刪除員工
*/
// 獲取所有的超鏈接
var links = document.getElementsByTagName('a');
// 遍歷links
for(var i=0; i<links.length; i++){
// 為超鏈接綁定單擊響應(yīng)函數(shù)
links[i].onclick = delA;
}
/*
點(diǎn)擊提交按鈕后，添加員工
*/
var addEmpButton = document.getElementById('addEmpButton');
addEmpButton.onclick = function () {
// 獲取用戶填寫 姓名 郵件 薪資
var name = document.getElementById('empName').value;
var email = document.getElementById('email').value;
var salary = document.getElementById('salary').value;
/*
<tr>
<td>Tom</td>
<td>tom@tom.com</td>
<td>5000</td>
<td><a href="javascript：;">Delete</a></td>
</tr>
*/
// 創(chuàng)建一個(gè)tr
var tr = document.createElement('tr');
// 通過innerHTML向tr中添加內(nèi)容
tr.innerHTML = '<td>'+name+'</td>' +
'<td>'+email+'</td>' +
'<td>'+salary+'</td>' +
'<td><a href="javascript：;">Delete</a></td>';
//為超鏈接綁定一個(gè)單擊響應(yīng)函數(shù)
tr.getElementsByTagName('a')[0].onclick = delA;
// 獲取id為employeeTable的table
var tbody = document.querySelector('#employeeTable tbody');
tbody.appendChild(tr);
};
};
</script>
</head>
<body>
<table id="employeeTable">
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th> </th>
</tr>
<tr>
<td>Tom</td>
<td>tom@tom.com</td>
<td>5000</td>
<td><a href="javascript：;">Delete</a></td>
</tr>
<tr>
<td>Jerry</td>
<td>jerry@sohu.com</td>
<td>8000</td>
<td><a href="javascript：;">Delete</a></td>
</tr>
<tr>
<td>Bob</td>
<td>bob@tom.com</td>
<td>10000</td>
<td><a href="deleteEmp?id=003">Delete</a></td>
</tr>
</table>
<div id="formDiv">
<h4>添加新員工</h4>
<table>
<tr>
<td class="word">name: </td>
<td class="inp">
<input type="text" name="empName" id="empName" />
</td>
</tr>
<tr>
<td class="word">email: </td>
<td class="inp">
<input type="text" name="email" id="email" />
</td>
</tr>
<tr>
<td class="word">salary: </td>
<td class="inp">
<input type="text" name="salary" id="salary" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button id="addEmpButton">
Submit
</button>
</td>
</tr>
</table>
</div>
</body>
</html>1-- let塊作用域包含function后:
<script type="text/javascript">
window.onload = function () {
/*
點(diǎn)擊超鏈接以后，刪除員工
*/
// 獲取所有的超鏈接
// var links = document.getElementsByTagName('a');
var links = document.querySelectorAll('a');
// 遍歷links
for(let i=0; i<links.length; i++){
// 將當(dāng)前元素的索引，作為對(duì)象的屬性存儲(chǔ)
// links[i].index = i;
// 為超鏈接綁定單擊響應(yīng)函數(shù)
// (function (i) {
// links[i].onclick = function () {
// alert(i);
// // 希望當(dāng)點(diǎn)擊哪個(gè)超鏈接，i就是哪個(gè)超鏈接的索引
// // 點(diǎn)擊第一個(gè)超鏈接i為0. 點(diǎn)擊第二個(gè)超鏈接i為1，以此類推
// // alert(this.index);
//
// return false;
// };
// })(i);
links[i].onclick = function () {
/*
即使可以正常獲取到i的值，下邊的寫法也是不正確的
getElementsByTagName() 獲取到的是一個(gè)實(shí)時(shí)更新的數(shù)組
當(dāng)刪除或增加一個(gè)元素后，數(shù)組會(huì)實(shí)時(shí)更新，也就是元素的索引會(huì)發(fā)生變化
*/
var tr = links[i].parentNode.parentNode;
var name = tr.getElementsByTagName('td')[0].innerHTML;
if(confirm('確認(rèn)刪除【'+name+'】嗎？')){
tr.parentNode.removeChild(tr);
}
return false;
};
}
};
</script>2:直接訪問:i=3 實(shí)際索引只有0,1,2—因?yàn)檠h(huán)先執(zhí)行完了,函數(shù)內(nèi)的i只能獲取到3----只能利用閉包,或塊作用域包含它 才可--
<script type="text/javascript">
window.onload = function () {
/*
點(diǎn)擊超鏈接以后，刪除員工
*/
// 獲取所有的超鏈接
var links = document.getElementsByTagName('a');
// 遍歷links
for(var i=0; i<links.length; i++){
alert('for 執(zhí)行了 '+i);
// 為超鏈接綁定單擊響應(yīng)函數(shù)
links[i].onclick = function () {
alert('onclick 執(zhí)行了 '+i); // i的值是3
// var tr = links[i].parentNode.parentNode;
// var name = tr.getElementsByTagName('td')[0].innerHTML;
// if(confirm('確認(rèn)刪除【'+name+'】嗎？')){
// // 這么寫行不行？
// // 創(chuàng)建一個(gè)表格時(shí)，如果在table中不指定thead tbody tfoot這些標(biāo)簽時(shí)
// // 瀏覽器會(huì)自動(dòng)添加tbody標(biāo)簽，并將所有的tr都放入到tbody標(biāo)簽中
// // tr的父元素是tbody而不是table
// // var employeeTable = document.getElementById('employeeTable');
// // 刪除tr
// tr.parentNode.removeChild(tr);
// }
return false;
};
}
};
</script><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>操作樣式</title>
<style>
#box1{
width: 100px;
height: 100px;
background-color: #f00;
margin-top: 50px;
transition: all 1s;
}
</style>
<script>
window.onload = function () {
//點(diǎn)擊按鈕后，改變box1的樣式
// 為按鈕綁定一個(gè)單擊響應(yīng)函數(shù)
var btn = document.getElementById('btn');
// 獲取box1
var box1 = document.getElementById('box1');
var w = 100;
btn.onclick = function () {
w += 100;
// 修改box1的樣式
// 可以直接通過box1.style屬性來修改其樣式
// 語(yǔ)法：元素.style.樣式名 = 樣式值
box1.style.width = w+'px';
box1.style.height = w+'px';
// 注意 類似于 xxx-yyy 這種屬性，必須將其修改為駝峰命名法
// 將-號(hào)去掉，-后的字母改大寫 xxxYyy borderLeftWidth
box1.style.backgroundColor = 'yellow';
};
};
</script>
</head>
<body>
<button id="btn">點(diǎn)我一下</button>
<div id="box1"></div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>操作樣式</title>
<style>
#box1{
height: 100px;
background-color: orange;
margin-top: 50px;
transition: all 1s;
}
</style>
<script>
window.onload = function () {
//點(diǎn)擊按鈕后，改變box1的樣式
// 為按鈕綁定一個(gè)單擊響應(yīng)函數(shù)
var btn = document.getElementById('btn');
// 獲取box1
var box1 = document.getElementById('box1');
var w = 100;
btn.onclick = function () {
// 通過style屬性所設(shè)置的樣式都是內(nèi)聯(lián)樣式，所以一般設(shè)置完成后會(huì)立即生效
// 讀取元素的樣式 通過style屬性所讀取的樣式，也是內(nèi)聯(lián)樣式
// 讀取語(yǔ)法：對(duì)象.style.樣式名 (一般不會(huì)使用這種方式來讀取屬性)
// alert(box1.style.width);
/*
getComputedStyle() 用來讀取元素當(dāng)前的樣式
需要兩個(gè)參數(shù)：
第一個(gè)，要獲取樣式的元素
第二個(gè)，要獲取的偽元素，如果不需要獲取偽元素的可以省略或傳null
返回值：
返回一個(gè)對(duì)象作為返回值，
對(duì)象中存儲(chǔ)了當(dāng)前元素所有的生效的樣式
這個(gè)對(duì)象也是一個(gè)實(shí)時(shí)更新對(duì)象
通過getComputedStyle()讀取的樣式都是只讀的，無法修改
該函數(shù)支持IE9及以上瀏覽器
*/
var cs = getComputedStyle(box1);
// alert(cs.width);
// alert(cs.backgroundColor);
// cs.width = '300px'; 不能修改的
alert(cs.width);
// box1.style.width = parseInt(cs.width) * 2 + 'px';
};
};
</script>
</head>
<body>
<button id="btn">點(diǎn)我一下</button>
<div id="box1"></div>
</body>
</html><style>
#box1{
width: 100px;
height: 100px;
margin: 50px;
background-color: orange;
padding: 20px;
border: 10px red solid;
overflow: auto;
}
#box2{
width: 350px;
height: 500px;
background-color: yellow;
}
</style>
<script>
window.onload = function () {
var box1 = document.getElementById('box1');
var btn01 = document.getElementById('btn01');
btn01.onclick = function () {
// 盒子的內(nèi)部大小
// clientWidth 元素寬度（內(nèi)容區(qū)+內(nèi)邊距）
// clientHeight 元素高度（內(nèi)容區(qū)+內(nèi)邊距）
// 這兩個(gè)屬性返回的值就是數(shù)字可以直接用來計(jì)算
// 盒子的整個(gè)大小
// offsetWidth 獲取元素的寬度（內(nèi)容區(qū)+內(nèi)邊距+邊框）
// offsetHeight 獲取元素的高度（內(nèi)容區(qū)+內(nèi)邊距+邊框）
// alert(box1.clientWidth);
/*
offsetParent 獲取元素的定位父元素
- 獲取離當(dāng)前元素最近的開啟了定位的祖先元素
如果所有的祖先元素都沒有開啟定位則返回body
offsetLeft 獲取當(dāng)前元素距離定位元素的左側(cè)偏移量
offsetTop 當(dāng)前元素距離定位元素上側(cè)的距離
*/
// alert(box1.offsetParent);
// alert(box1.offsetLeft);
// alert(box1.offsetTop);
// scrollHeight 用來獲取元素滾動(dòng)區(qū)域的高度
// scrollWidth 用來獲取滾動(dòng)區(qū)域的寬度
// alert(box1.scrollWidth);
// 這兩個(gè)值可以修改，以改變滾動(dòng)條的位置
// scrollTop 垂直滾動(dòng)條的位移
// scrollLeft 水平滾動(dòng)條的位移
// 當(dāng)元素的scrollHeight減去scrollTop等于元素clientHeight時(shí)，說明垂直滾動(dòng)條已經(jīng)滾動(dòng)到底了
alert(box1.scrollHeight - box1.scrollTop === box1.clientHeight);
// alert(box1.clientHeight);
// box1.scrollLeft = 25;
};
};
</script>
</head>
<body>
<button id="btn01">點(diǎn)我一下</button>
<div id="box3" style="position:relative; border: 5px black dotted;">
<div id="box1">
<div id="box2"></div>
</div>
</div>
</body><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#info{
width: 300px;
height: 400px;
background-color: #bfa;
overflow: auto;
}
</style>
<script>
window.onload = function () {
//當(dāng)協(xié)議的滾動(dòng)條拖動(dòng)到底時(shí)，使多選框可用，當(dāng)多選框選中時(shí)，使提交按鈕可用
// 獲取info
var info = document.getElementById('info');
// 獲取ck input
var ck = document.getElementById('ck');
// 獲取注冊(cè)按鈕
var re = document.getElementById('re');
// scroll事件會(huì)在元素的滾動(dòng)條滾動(dòng)時(shí)觸發(fā)
info.onscroll = function () {
// console.log(Math.round(info.scrollHeight - info.scrollTop), info.clientHeight);
//因?yàn)楣雀铻g覽器縮放,會(huì)導(dǎo)致數(shù)字不精確, 所以用Math.round四舍五入取整!
// 檢查垂直滾動(dòng)條是否滾動(dòng)到底
if(Math.round(info.scrollHeight - info.scrollTop) === info.clientHeight){
// 等式滿足證明滾動(dòng)條滾動(dòng)到底，滾動(dòng)到底說明用戶已經(jīng)閱讀完協(xié)議
// 使多選框可用，表單項(xiàng)的disabled屬性用來設(shè)置元素是否禁用
// 如果設(shè)置true，則表示禁用元素，設(shè)置為false則表示啟用元素
ck.disabled = false;
}
};
// 接收協(xié)議后，使注冊(cè)按鈕可用
ck.onclick = function () {
// 使注冊(cè)按鈕可用
re.disabled = !ck.checked;
};
};
</script>
</head>
<body>
<h2>歡迎用戶注冊(cè)，請(qǐng)仔細(xì)閱讀以下協(xié)議：</h2>
<p id="info">
親愛的用戶，歡迎注冊(cè)我們的網(wǎng)站，你必須要遵守以下協(xié)議，要不然你就別注冊(cè)
親愛的用戶，歡迎注冊(cè)我們的網(wǎng)站，你必須要遵守以下協(xié)議，要不然你就別注冊(cè)
親愛的用戶，歡迎注冊(cè)我們的網(wǎng)站，你必須要遵守以下協(xié)議，要不然你就別注冊(cè)
親愛的用戶，歡迎注冊(cè)我們的網(wǎng)站，你必須要遵守以下協(xié)議，要不然你就別注冊(cè)
親愛的用戶，歡迎注冊(cè)我們的網(wǎng)站，你必須要遵守以下協(xié)議，要不然你就別注冊(cè)
親愛的用戶，歡迎注冊(cè)我們的網(wǎng)站，你必須要遵守以下協(xié)議，要不然你就別注冊(cè)
親愛的用戶，歡迎注冊(cè)我們的網(wǎng)站，你必須要遵守以下協(xié)議，要不然你就別注冊(cè)
親愛的用戶，歡迎注冊(cè)我們的網(wǎng)站，你必須要遵守以下協(xié)議，要不然你就別注冊(cè)
親愛的用戶，歡迎注冊(cè)我們的網(wǎng)站，你必須要遵守以下協(xié)議，要不然你就別注冊(cè)
親愛的用戶，歡迎注冊(cè)我們的網(wǎng)站，你必須要遵守以下協(xié)議，要不然你就別注冊(cè)
親愛的用戶，歡迎注冊(cè)我們的網(wǎng)站，你必須要遵守以下協(xié)議，要不然你就別注冊(cè)
親愛的用戶，歡迎注冊(cè)我們的網(wǎng)站，你必須要遵守以下協(xié)議，要不然你就別注冊(cè)
親愛的用戶，歡迎注冊(cè)我們的網(wǎng)站，你必須要遵守以下協(xié)議，要不然你就別注冊(cè)
親愛的用戶，歡迎注冊(cè)我們的網(wǎng)站，你必須要遵守以下協(xié)議，要不然你就別注冊(cè)
親愛的用戶，歡迎注冊(cè)我們的網(wǎng)站，你必須要遵守以下協(xié)議，要不然你就別注冊(cè)
親愛的用戶，歡迎注冊(cè)我們的網(wǎng)站，你必須要遵守以下協(xié)議，要不然你就別注冊(cè)
親愛的用戶，歡迎注冊(cè)我們的網(wǎng)站，你必須要遵守以下協(xié)議，要不然你就別注冊(cè)
親愛的用戶，歡迎注冊(cè)我們的網(wǎng)站，你必須要遵守以下協(xié)議，要不然你就別注冊(cè)
親愛的用戶，歡迎注冊(cè)我們的網(wǎng)站，你必須要遵守以下協(xié)議，要不然你就別注冊(cè)
親愛的用戶，歡迎注冊(cè)我們的網(wǎng)站，你必須要遵守以下協(xié)議，要不然你就別注冊(cè)
親愛的用戶，歡迎注冊(cè)我們的網(wǎng)站，你必須要遵守以下協(xié)議，要不然你就別注冊(cè)
親愛的用戶，歡迎注冊(cè)我們的網(wǎng)站，你必須要遵守以下協(xié)議，要不然你就別注冊(cè)
親愛的用戶，歡迎注冊(cè)我們的網(wǎng)站，你必須要遵守以下協(xié)議，要不然你就別注冊(cè)
親愛的用戶，歡迎注冊(cè)我們的網(wǎng)站，你必須要遵守以下協(xié)議，要不然你就別注冊(cè)
親愛的用戶，歡迎注冊(cè)我們的網(wǎng)站，你必須要遵守以下協(xié)議，要不然你就別注冊(cè)
親愛的用戶，歡迎注冊(cè)我們的網(wǎng)站，你必須要遵守以下協(xié)議，要不然你就別注冊(cè)
親愛的用戶，歡迎注冊(cè)我們的網(wǎng)站，你必須要遵守以下協(xié)議，要不然你就別注冊(cè)
親愛的用戶，歡迎注冊(cè)我們的網(wǎng)站，你必須要遵守以下協(xié)議，要不然你就別注冊(cè)
親愛的用戶，歡迎注冊(cè)我們的網(wǎng)站，你必須要遵守以下協(xié)議，要不然你就別注冊(cè)
親愛的用戶，歡迎注冊(cè)我們的網(wǎng)站，你必須要遵守以下協(xié)議，要不然你就別注冊(cè)
親愛的用戶，歡迎注冊(cè)我們的網(wǎng)站，你必須要遵守以下協(xié)議，要不然你就別注冊(cè)
親愛的用戶，歡迎注冊(cè)我們的網(wǎng)站，你必須要遵守以下協(xié)議，要不然你就別注冊(cè)
親愛的用戶，歡迎注冊(cè)我們的網(wǎng)站，你必須要遵守以下協(xié)議，要不然你就別注冊(cè)
親愛的用戶，歡迎注冊(cè)我們的網(wǎng)站，你必須要遵守以下協(xié)議，要不然你就別注冊(cè)
親愛的用戶，歡迎注冊(cè)我們的網(wǎng)站，你必須要遵守以下協(xié)議，要不然你就別注冊(cè)
親愛的用戶，歡迎注冊(cè)我們的網(wǎng)站，你必須要遵守以下協(xié)議，要不然你就別注冊(cè)
親愛的用戶，歡迎注冊(cè)我們的網(wǎng)站，你必須要遵守以下協(xié)議，要不然你就別注冊(cè)
親愛的用戶，歡迎注冊(cè)我們的網(wǎng)站，你必須要遵守以下協(xié)議，要不然你就別注冊(cè)
親愛的用戶，歡迎注冊(cè)我們的網(wǎng)站，你必須要遵守以下協(xié)議，要不然你就別注冊(cè)
親愛的用戶，歡迎注冊(cè)我們的網(wǎng)站，你必須要遵守以下協(xié)議，要不然你就別注冊(cè)
親愛的用戶，歡迎注冊(cè)我們的網(wǎng)站，你必須要遵守以下協(xié)議，要不然你就別注冊(cè)
親愛的用戶，歡迎注冊(cè)我們的網(wǎng)站，你必須要遵守以下協(xié)議，要不然你就別注冊(cè)
親愛的用戶，歡迎注冊(cè)我們的網(wǎng)站，你必須要遵守以下協(xié)議，要不然你就別注冊(cè)
親愛的用戶，歡迎注冊(cè)我們的網(wǎng)站，你必須要遵守以下協(xié)議，要不然你就別注冊(cè)
親愛的用戶，歡迎注冊(cè)我們的網(wǎng)站，你必須要遵守以下協(xié)議，要不然你就別注冊(cè)
親愛的用戶，歡迎注冊(cè)我們的網(wǎng)站，你必須要遵守以下協(xié)議，要不然你就別注冊(cè)
親愛的用戶，歡迎注冊(cè)我們的網(wǎng)站，你必須要遵守以下協(xié)議，要不然你就別注冊(cè)
親愛的用戶，歡迎注冊(cè)我們的網(wǎng)站，你必須要遵守以下協(xié)議，要不然你就別注冊(cè)
親愛的用戶，歡迎注冊(cè)我們的網(wǎng)站，你必須要遵守以下協(xié)議，要不然你就別注冊(cè)
</p>
<input id="ck" type="checkbox" disabled> 我已仔細(xì)閱讀，并遵守以上協(xié)議
<input id="re" type="button" value="注冊(cè)" disabled>
</body>
</html>
歡迎關(guān)注我的原創(chuàng)文章：小伙伴們！我是一名熱衷于前端開發(fā)的作者，致力于分享我的知識(shí)和經(jīng)驗(yàn)，幫助其他學(xué)習(xí)前端的小伙伴們。在我的文章中，你將會(huì)找到大量關(guān)于前端開發(fā)的精彩內(nèi)容。
學(xué)習(xí)前端技術(shù)是現(xiàn)代互聯(lián)網(wǎng)時(shí)代中非常重要的一項(xiàng)技能。無論你是想成為一名專業(yè)的前端工程師，還是僅僅對(duì)前端開發(fā)感興趣，我的文章將能為你提供寶貴的指導(dǎo)和知識(shí)。
在我的文章中，你將會(huì)學(xué)到如何使用HTML、CSS和JavaScript創(chuàng)建精美的網(wǎng)頁(yè)。我將深入講解每個(gè)語(yǔ)言的基礎(chǔ)知識(shí)，并提供一些實(shí)用技巧和最佳實(shí)踐。無論你是初學(xué)者還是有一定經(jīng)驗(yàn)的開發(fā)者，我的文章都能夠滿足你的學(xué)習(xí)需求。
此外，我還會(huì)分享一些關(guān)于前端開發(fā)的最新動(dòng)態(tài)和行業(yè)趨勢(shì)。互聯(lián)網(wǎng)技術(shù)在不斷發(fā)展，新的框架和工具層出不窮。通過我的文章，你將會(huì)了解到最新的前端技術(shù)趨勢(shì)，并了解如何應(yīng)對(duì)這些變化。
我深知學(xué)習(xí)前端不易，因此我將盡力以簡(jiǎn)潔明了的方式解釋復(fù)雜的概念，并提供一些易于理解的實(shí)例和案例。我希望我的文章能夠幫助你更快地理解前端開發(fā)，并提升你的技能。
如果你想了解更多關(guān)于前端開發(fā)的內(nèi)容，不妨關(guān)注我的原創(chuàng)文章。我會(huì)不定期更新，為你帶來最新的前端技術(shù)和知識(shí)。感謝你的關(guān)注和支持，我們一起探討交流技術(shù)共同進(jìn)步，期待與你一同探索前端開發(fā)的奇妙世界！
#文章首發(fā)挑戰(zhàn)賽#
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
