當前位置：首頁 >

各种API以及事件初识——笔记

發布時間：2023/12/18 37 豆豆

生活随笔收集整理的這篇文章主要介紹了各种API以及事件初识——笔记小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1.outerHTML/ innerText / innerHTML

innerHTML
將元素中所有的內容都獲取到包括HTML標簽但是不包括自身標簽
innerText
將元素的內容獲取出來不包括HTML標簽
outerHTML
將自身以及子元素所有的內容都獲取出來包括HTML標簽包括自身標簽

<body ><div id="d">老王<span>住你隔壁</span></div></body> </html> <script>var x = document.getElementById("d");console.log(x.innerHTML);console.log(x.innerText);console.log(x.outerHTML); </script>

自定義屬性及getAttribute/setAttribute方法

<div id="d"></div> //setAttribute("屬性名稱","屬性值名稱") //getAttribute("屬性名稱") : 返回屬性名稱對應的屬性值 //我們可以通過setAttribute設置自定義屬性 var d = document.getElementById("d");d.setAttribute("heihei",123);document.write(d.getAttribute("heihei"));

獲取非行內樣式（兼容問題）

行內樣式
行內樣式就是卸載標簽體內的樣式
非行內樣式
非行內樣式就是指不是寫在標簽內的樣式

<div id="box" style="color: red;"> </div> var d = document.getElementById("box");//獲取行內樣式 document.write(d.style.color); #box{color: blue; } var d = document.getElementById("box"); //獲取非行內樣式 document.write(d.style.color); 返回空 ---------------------------------------- #box{color: red;font-size: 22px; } //照抄擴展兼容性 var d = document.getElementById("box"); function getStyle(obj,attr){ //獲取非行間樣式，obj是對象，attr是值if(obj.currentStyle){ //針對ie獲取非行間樣式return obj.currentStyle[attr];}else{return getComputedStyle(obj,false)[attr]; //針對非ie}; }; document.write(getStyle(d,"color") + "</br>"); document.write(getStyle(d,"font-size"));

insertBefore:添加到一個節點前面

父節點：insertBefore(要添加的子節點，參照節點）；
參照節點如果為null 那就和appendChild()一樣

<html><head><meta charset="utf-8"><title></title></head><body><ul id="list"><li>槑槑</li><li>晶晶</li><li>叕叕</li></ul></body> </html> <script>var list = document.getElementById("list");var o = document.createElement("li");o.innerHTML = "淼淼"; //如果參數2位null，則和appendChild一樣//list.insertBefore(o,null);list.insertBefore(o,list.children[2]); </script>

offsetWidth/offsetHeight/offsetLeft/offsetTop

window.onscroll事件

回到頂部案例

<body><div id="t"><p>111111111111111</p>....<p>111111111111111</p></div><button onclick="fun()">按鈕</button></body> </html> <script>var _top = null;window.onscroll = function(){//兼容問題獲取滾動條移動的垂直距離_top = document.body.scrollTop || document.documentElement.scrollTop;console.log(_top);}function fun(){document.body.scrollTop = document.documentElement.scrollTop = 0;}

事件

事件對象
事件：對某一個元素的某種操作
事件對象：當某個事件觸發時產生的對象，就是事件對象
event 使用前提，必須有事件，不同的事件產生的事件對象不同
事件對象的兼容： var e = event || evt;
事件對象擁有改事件相關的屬性和方法
Demo:

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title></title></head><body><script type="text/javascript">//事件對象 eventdocument.onkeyup = function(evt){var e = evt || event;alert(e);}</script></body> </html>

Demo: 小老虎跳一跳

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title></title><style>#box{height: 100px;width: 100px;background: url(img/3.jpg);background-size: 100px 100px;position: absolute;left: 200px;top: 600px;}</style></head><body><div id="box" onclick="jump()"></div></body> </html> <script>var d = document.getElementById("box");function jump(){d.style.top = d.offsetTop - 200 + "px";setTimeout(function(){d.style.top = "600px";},2000);} </script>

2.事件對象的屬性
坐標屬性
pageX / pageY :x相對于整個文檔頂部和左側的坐標。
clientX / clientY :相對于局部窗口的左側和頂部的坐標
offsetX / offsetY : 相對于內部元素的距離左側和頂部的坐標，常用于拖拽

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style>*{margin: 0;padding: 0;}body{height: 1000px;}#div1{height: 200px;width: 200px;border: 1px solid red;position: absolute;left: 200px;}</style><script>document.onclick = function(evt){var e = evt || event;console.log("client" + e.clientX + "," + e.clientY);//只記錄當前的局部頁面算console.log("page" + e.pageX + "," + e.pageY);//從document頁面算起...習慣上用pageconsole.log("offset" + e.offsetX + "," + e.offsetY);}</script></head><body><div id="div1"></div></body> </html>

3.案例圖片跟隨（練習）

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style>#myimg{height: 100px;width: 100px;position: absolute;background: url(img/clothes.jpg);background-size: 100px 100px;}</style></head><body><div id="myimg"></div></body> </html> <script>document.onmousemove = function(evt){//獲取實var e = evt || event;var oImg = document.getElementById("myimg");//操作圖片X和Y的位置oImg.style.left = e.pageX - oImg.offsetWidth/2 + "px";oImg.style.top = e.pageY -oImg.offsetHeight/2 + "px";} </script>

4.鍵盤事件
onkeyup: 用戶釋放某一個按鍵時發生
onkeydown: 用戶按下按鍵時發生,任何一個按鍵即可發生事件
onkeypress: 用戶按下按鍵，并且產生一個字符時發生（意思就是說按ctrl這樣的按鍵沒有效果的）

事件對象的屬性:
keyCode: 獲取鍵盤按鍵值字母對應其ASCII值識別
A:65 a:97 0:48 回車:13
【注意】:keyPress 的ctrl+回車返回值為10

document.onkeypress = function(evt){var e = evt || event;if(e.keyCode == 13 || e.keyCode == 10 && e.ctrlKey){alert("send");}}

ctrlKey:返回當事件被觸發時，“Ctrl” 是否被按下,返回值為true or false

【注意】:鍵盤檢測兼容寫方法
var key = e.keyCode || e.which || e.charCode;

總結

以上是生活随笔為你收集整理的各种API以及事件初识——笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。