JavaScript知識
- DOM增刪改
- 操作行內樣式
- 獲取元素的樣式
- 例子
DOM增刪改
<div>
<ul id="city">
<li id="bj">北京</li>
</ul>
</div>
<div class="btn">
<button id="btn1">創建一個“廣州”節點，添加到#city下</button>
<button id="btn2">將“廣州”節點插入到bj前面</button>
<button id="btn3">廣州節點替換北京節點</button>
<button id="btn4">洗掉北京節點</button>
</div>
var myClick = function (btn, fun) {
var btn = document.getElementById(btn);
btn.onclick = fun;
}
window.onload = function () {
//創建一個“廣州”節點，添加到#city下
myClick("btn1", function () {
//document.createElement()可以用于創建一個元素節點物件
//它需要一個標簽名作為引數，將會根據該標簽名創建元素節點物件
//并將創建好的物件作為回傳值回傳
var li = document.createElement("li");
var gzText = document.createTextNode("廣州");
//document.createTextNode()可以用來創建一個文本節點物件，需要一個文本內容作為引數
//將會根據該內容創建文本節點，并將新的節點回傳
/*
* 將gzText設定li的節點
* appendChild()-向父節點中添加一個新的位元組點
* - 用法：父節點.appendChild(子節點);
*/
li.appendChild(gzText);
var city = document.getElementById("city");
city.appendChild(li);
});
//將“廣州”節點插入到bj前面
myClick("btn2", function () {
//創建廣州
var li = document.createElement("li");
var gzText = document.createTextNode("廣州");
li.appendChild(gzText);
//獲取id為bj的節點
var bj = document.getElementById("bj");
//獲取父節點city
var city = document.getElementById("city");
//inserBefore
//- 可以在指定的位元組點前插入新的子節點
// 父節點.inserBefore(新節點,舊節點)
city.insertBefore(li, bj);
});
//廣州節點替換北京節點
myClick("btn3", function () {
//創建廣州
var li = document.createElement("li");
var gzText = document.createTextNode("廣州");
li.appendChild(gzText);
//獲取id為bj的節點
var bj = document.getElementById("bj");
//獲取父節點city
var city = document.getElementById("city");
//replaceChild
//- 可以在指定的位元組點替換新的子節點
// 父節點.replaceChild(新節點,舊節點)
city.replaceChild(li, bj);
});
//洗掉北京節點
myClick("btn4", function () {
//獲取id為bj的節點
var bj = document.getElementById("bj");
//獲取父節點city
var city = document.getElementById("city");
/*
* removechlid()
* - 洗掉子節點
* - 語法：父節點.removeChild(子節點);
*
*/
city.removeChild(bj);
});
}
</script>
其中第一步的“創建一個“廣州”節點，添加到#city下”，用第二種方法：
myClick("btn5", function () {
var li = document.createElement("li");
li.innerHTML = "廣州";
var city = document.getElementById("city");
city.appendChild(li);
});
操作行內樣式
操作CSS
通過JS修改元素的樣式：
元素.style.樣式名 = 樣式值;
例子：
<script>
window.onload =function(){
var btn = document.getElementById("btn");
var box = document.getElementById("box");
btn.onclick = function(){
box.style.width = "300px";
}
}
</script>
<style>
#box{
height: 150px;
width: 150px;
background-color: red;
}
</style>
<body>
<div id="box"></div>
<br>
<button id="btn">點擊一下</button>
</body>
注意如果CSS的樣式名中含有-，比如background-color，這種樣式名是不合法的，去掉-改成大寫，
backgroundColor
通過style屬性設定的樣式都是行內樣式，行內樣式具有較高的優先級，
但是如果在樣式中，有!important，則樣式會有最高的優先級，會使得JS失效，
所以盡量不要使用!improtant
獲取元素的樣式
上述JS中的修改和讀取的都是行內樣式，如果想讀取樣式表中的樣式，就沒有辦法了，
語法：
元素.currentStyle.樣式名
//可以讀取當前顯示的樣式
但是這個方法只有IE支持
在其他瀏覽器的方法：
getComputedStyle()這個方法來獲取當前的樣式，這個是window方法，可以直接使用
需要兩個引數：
1、要獲取樣式的元素；
2、可以傳遞一個偽元素，一般都傳null；
例子
當scrollHeight - scrollTop == clinetHeight 時，說明滾動條到底了，
但是但是！！！ 在除錯程序中發現，即使滾動條到底了，也無法觸發行為，原因是：
除錯得知chrome瀏覽器下scrollTop是小數，而clientHeight和scrollHeight始終是整數，所以在相減之后，結果始終是一個大于clinetHeight的小數，
解決方法：將等式改為不等式，并且左邊-1：scrollHeight - scrollTop -1 < clinetHeight
例子：閱讀用戶須知，滾動條不到底，無法勾選：
<script>
window.onload = function () {
//滾動條到底的時候，表單才能用
var info = document.getElementById("info");
var inputs = document.getElementsByTagName("input");
info.onscroll = function () {
//檢查滾動條是否到底
if (info.scrollHeight - info.scrollTop - 1 < info.clientHeight) {
inputs[0].disabled = false;
inputs[1].disabled = false;
}
};
var btn = document.getElementById("btn");
btn.onclick = function(){
alert(info.scrollHeight - info.scrollTop);
alert(info.clientHeight);
};
};
</script>
<style>
#info {
width: 300px;
height: 500px;
background-color: #bfa;
overflow: auto;
}
</style>
<body>
<h3>歡迎用戶注冊</h3>
<p id="info">
...
我到底了~~</p>
<button id="btn">測驗</button>
<input type="checkbox" name="" id="" disabled="disabled">我已仔細閱讀，一定遵守協議
<input type="submit" value="下一步" disabled="disabled">
</body>
在某個區域內，滑鼠移動的坐標會被記錄下來：
事件物件：當事件的回應函式被觸發時，瀏覽器每次都會將一個事件物件作為實參傳遞進回應函式
<script>
window.onload = function () {
var areaDiv = document.getElementById("areaDiv");
var showDiv = document.getElementById("showDiv");
areaDiv.onmousemove = function (event) {
//在showDiv里面顯示滑鼠坐標
// alert(event);
var x= event.clientX;
var y= event.clientY;
showDiv.innerHTML = "x="+x+","+"y="+y;
}
};
</script>
<style>
#areaDiv {
width: 350px;
height: 150px;
border: 1px solid black;
}
#showDiv {
width: 350px;
height: 50px;
border: 1px solid black;
}
</style>
<body>
<div id="areaDiv"></div>
<br>
<div id="showDiv"></div>
</body>
div跟隨滑鼠走動
<style>
#box{
height: 150px;
width: 150px;
background-color: red;
position:absolute;
}
</style>
<script>
window.onload = function(){
var box = document.getElementById("box");
document.onmousemove = function(event){
var left = event.clientX;
var top = event.clientY;
var st = document.documentElement.scrollTop;
var sl = document.documentElement.scrollLeft;
box.style.left = left+sl+"px";
box.style.top = top+st+"px";
}
}
</script>
<body style="height: 1000px; width: 5000px;">
<div id="box"></div>
</body>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/294734.html
標籤：其他