目錄
- 一、getComputedStyle()
- 1、getComputedStyle()是window的方法，可以獲取元素當前的樣式
- 2、兩個引數
- 3、代碼實體
- 4、瀏覽器效果
- 二、定義一個方法獲取元素資訊
- 1、代碼實體
- 2、瀏覽器顯示
- 三、clientWidth和clientHeight
- 1、這兩個元素是獲取元素的寬度和高度，不帶px
- 2、這兩個元素是只讀的，不可修改
- 3、代碼實體
- 4、瀏覽器展示
- 四、offsetWidth和offsetHeight
- 1、獲取元素的整個的寬度和高度，包括內容區、內邊距和邊框
- 2、代碼實體
- 3、瀏覽器展示
- 五、offsetParent
- 1、獲取當前元素的父元素
- 2、代碼實體
- 3、瀏覽器展示
- 六、offsetLeft和offsetTop
- 1、offsetLeft
- 2、offsetTop
- 七、scrollWidth和scrollHeight
- 1、scrollWidth
- 2、scrollHeight
- 八、scrollLeft和scrollTop
- 1、scrollLeft
- 2、scrollTop
- 九、 事件的冒泡
- 1、 事件的冒泡指的是事件的向上傳遞，當后代元素的事件被觸發時，其父元素的相同事件也會被觸發，
- 2、可以通過設定，取消事件的冒泡
- 3、代碼實體
- 4、瀏覽器展示
- 十、新星計劃
一、getComputedStyle()
1、getComputedStyle()是window的方法，可以獲取元素當前的樣式
2、兩個引數
- 要獲取樣式的元素
- 可以傳遞一個偽元素，一般都傳null
該方法會回傳一個物件，物件中封裝了當前元素對應的樣式，可以通過物件樣式名來讀取樣式，如果獲取的樣式沒有設定，則會獲取到真實的值，而不是默認值，
3、代碼實體
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 120px;
height: 120px;
background-color: red;
}
</style>
<script type="text/javascript">
window.onload = function(){
//點擊按鈕以后讀取box1的樣式
var box1 = document.getElementById("box1");
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){
var obj = getComputedStyle(box1,null);
alert(getComputedStyle(box1,null).width);
};
};
</script>
</head>
<body>
<button id="btn01">戳我一下</button>
<br /><br />
<div id="box1" ></div>
</body>
</html>
4、瀏覽器效果
備注：IE無效
二、定義一個方法獲取元素資訊
1、代碼實體
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 120px;
height: 120px;
background-color: red;
}
</style>
<script type="text/javascript">
window.onload = function(){
//點擊按鈕以后讀取box1的樣式
var box1 = document.getElementById("box1");
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){
// 定義一個函式，用來獲取指定元素的當前的樣式
var ret = getBoxStyle(box1,"width");
alert(ret);
};
};
/*
* 引數：
* obj 要獲取樣式的元素
* name 要獲取的樣式名
*/
function getBoxStyle(obj , name){
if(window.getComputedStyle){
//谷歌/edge瀏覽器，具有getComputedStyle()方法
return getComputedStyle(obj , null)[name];
}else{
//IE沒有getComputedStyle()方法，下面為IE8的方式
return obj.currentStyle[name];
}
}
</script>
</head>
<body>
<button id="btn01">戳我一下</button>
<br /><br />
<div id="box1" ></div>
</body>
</html>
2、瀏覽器顯示
三、clientWidth和clientHeight
1、這兩個元素是獲取元素的寬度和高度，不帶px
2、這兩個元素是只讀的，不可修改
3、代碼實體
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 120px;
height: 150px;
background-color: red;
}
</style>
<script type="text/javascript">
window.onload = function(){
var box1 = document.getElementById("box1");
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){
alert(box1.clientWidth);
alert(box1.clientHeight);
};
};
</script>
</head>
<body id="body">
<button id="btn01">親我一下</button>
<div id="box1"></div>
</body>
</html>
4、瀏覽器展示
四、offsetWidth和offsetHeight
1、獲取元素的整個的寬度和高度，包括內容區、內邊距和邊框
2、代碼實體
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: red;
padding: 10px;
border: 10px solid yellow;
}
</style>
<script type="text/javascript">
window.onload = function(){
var box1 = document.getElementById("box1");
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){
/*
* offsetWidth
* offsetHeight
* - 獲取元素的整個的寬度和高度，包括內容區、內邊距和邊框
*/
alert(box1.offsetWidth);
};
};
</script>
</head>
<body id="body">
<button id="btn01">親我一下</button>
<br /><br />
<div id="box1"></div>
</body>
</html>
3、瀏覽器展示
五、offsetParent
1、獲取當前元素的父元素
2、代碼實體
var op = box1.offsetParent;
alert(op.id);
3、瀏覽器展示
六、offsetLeft和offsetTop
1、offsetLeft
當前元素相對于其定位父元素的水平偏移量
2、offsetTop
當前元素相對于其定位父元素的垂直偏移量
七、scrollWidth和scrollHeight
1、scrollWidth
可以獲取元素整個滾動區域的寬度
2、scrollHeight
可以獲取元素整個滾動區域的高度
八、scrollLeft和scrollTop
1、scrollLeft
獲取水平滾動條滾動的距離
2、scrollTop
獲取垂直滾動條滾動的距離
當滿足scrollHeight - scrollTop == clientHeight，說明垂直滾動條滾動到底了，
當滿足scrollWidth - scrollLeft == clientWidth，說明水平滾動條滾動到底了，
九、 事件的冒泡
1、 事件的冒泡指的是事件的向上傳遞，當后代元素的事件被觸發時，其父元素的相同事件也會被觸發，
2、可以通過設定，取消事件的冒泡
3、代碼實體
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#nz{
width: 200px;
height: 100px;
background-color: rgb(205, 112, 50);
}
#yy{
background-color: yellow;
}
</style>
<script type="text/javascript">
window.onload = function(){
//為云韻系結一個單擊回應函式
var yy = document.getElementById("yy");
yy.onclick = function(event){
event = event || window.event;
alert("我是云韻");
//取消冒泡
//可以將事件物件的cancelBubble設定為true，即可取消冒泡
//event.cancelBubble = true;
};
//為哪吒系結一個單擊回應函式
var nz = document.getElementById("nz");
nz.onclick = function(event){
event = event || window.event;
alert("我是哪吒");
event.cancelBubble = true;
};
//為body系結一個單擊回應函式
document.body.onclick = function(){
alert("我是body的單擊回應函式");
};
};
</script>
</head>
<body>
<div id="nz">
我是哪吒
<span id="yy">我是云韻</span>
</div>
</body>
</html>
4、瀏覽器展示
十、新星計劃
對參與「新星計劃」的博文，官方不會給予流量扶持，需要學員借助導師的指導，憑借自然流量登上熱榜和推薦流；
每位學員每周需保證更新不少于2篇的原創文章，如果當周少于2篇文章則失去參賽資格；
學員在報名時請務必準確選擇【賽道入口】，賽道一經選定不可修改；
在培訓期間，每位導師需要組織不少于2次的培訓，圍繞文章創作、直播演繹、內容設計、上榜規則解讀等進行；
活動結束后由社區博主進行評選，將根據博文進入熱榜的次數、進入推薦流的次數、增粉資料、綜合博文資料等指標進行評選，每個社區評選10位優勝者（10*3），獲得專屬獎品，
這里是“新星計劃·第二季”【Java】賽道的報名入口！
1、Java從入門到專案實戰
2、SQL從入門到精通
3、手把手教你學Linux
4、Python從入門到專案實戰
🍅 Java學習路線配套文章：Java學習路線總結，搬磚工逆襲Java架構師（全網最強）
🍅 基礎推薦：Java基礎教程系列
🍅 實戰推薦：Spring Boot基礎教程
🍅 簡介：Java領域優質創作者🏆、CSDN哪吒公眾號作者? 、Java架構師奮斗者💪
🍅 掃描主頁左側二維碼，加入群聊，一起學習、一起進步
🍅 歡迎點贊 👍 收藏 ?留言 📝
上一篇：JavaScript零基礎入門 8：document獲取節點元素
下一篇：敬請期待
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/392456.html
標籤：其他
上一篇：如何在TypeScript中對兩個多載函式使用相同的引數？
下一篇：從陣列中洗掉特定字串