待整理

時間 2019-11-09

標籤整理简体版

原文原文鏈接

offsetWidth, clientWidth, scrollWidth的區別css

offsetWidth　　width+padding+borderhtml

clientWidth　　width+paddingjson

scrollWidth　　大小是內容的大小數組

scrollTo(x,y)　　去往頁面的x和y座標的位置瀏覽器

window.scrollTo(x,y)框架

window.onscroll = fucntion() { fun (); }　　窗口滾動事件dom

window.onresize　　改變窗口事件　　事件會在窗口或框架被調整大小時觸發函數

獲取鼠標的位置

clientX　　clientYspa

檢測屏幕分辨率寬度

window.screen.width　　返回的是硬件分辨率寬度code

檢測瀏覽器窗口寬度：

window.innerWidth　　IE9及以上版本

document.documentElement.clientWidth　　標準模式

document.body.clientWidth　　怪異模式

封裝可視區域大小的函數:

 1     function client() {
 2         if(window.innerWidth != null)  // ie9 +  最新瀏覽器
 3         {
 4             return {
 5                 width: window.innerWidth,
 6                 height: window.innerHeight
 7             }
 8         }
 9         else if(document.compatMode == "CSS1Compat")  // 標準瀏覽器
10         {
11             return {
12                 width: document.documentElement.clientWidth,
13                 height: document.documentElement.clientHeight
14             }
15         }
16         return {   // 怪異瀏覽器
17             width: document.body.clientWidth,
18             height: document.body.clientHeight
19 
20         }
21     }

scrollTop　　被捲去的頭部

scrollLeft　　封裝本身的函數

window.pageXOffset

window.pageYOffset

封裝屏幕滾動距離的函數:

 1 function scroll() {
 2     if(window.pageYOffset != null)  //  ie9+ 和其餘瀏覽器
 3     {
 4         return {
 5             left: window.pageXOffset,
 6             top: window.pageYOffset
 7         }
 8     }
 9     else if(document.compatMode == "CSS1Compat")  // 聲明的了 DTD
10     // 檢測是否是怪異模式的瀏覽器 -- 就是沒有 聲明<!DOCTYPE html>
11     {
12         return {
13             left: document.documentElement.scrollLeft,
14             top: document.documentElement.scrollTop
15         }
16     }
17     return { //  剩下的確定是怪異模式的
18         left: document.body.scrollLeft,
19         top: document.body.scrollTop
20     }
21 }

阻止冒泡

event.stopPropagation();　　標準瀏覽器　　w3c標準

event.cancelBubble = true　　IE678

兼容寫法:

var event = event || window.event;
        if(event && event.stopPropagation)
        {
            event.stopPropagation();  //  w3標準
        }
        else
        {
            event.cancelBubble = true;  // IE78
        }

顯示/隱藏滾動條

document.body.style.overFlow = "visible"

document.body.style.overFlow = "hidden"

判斷當前對象

event.target.id

event.srcElement.id　　IE678

兼容寫法：

var targetId = event.target ? event.target.id : event.srcElement.id;

得到用戶選擇的內容

window.getSelection()　　標準瀏覽器

document.selection.createRange().text　　IE678

var tet;
if(window.getSelection)
        {
            txt = window.getSelection().toString();
        }
        else
        {
            txt = document.selection.createRange().text;   // IE的寫法
        }

經常使用的數學函數

　　Math.ceil()　　天花板函數，向上取整　　1.05取2，-1.3取-1

　　Math.floor()　　地板函數，向下取整　　1.05取1，-1.3取-2

　　Math.round()　　四捨五入函數　　Math.abs()　　絕對值函數　　|-5|取5

　　Math.random()　　隨機一個0-1的小數

　　Math.max(x, y)　　返回x和y的最高值

　　Math.min(x, y)　　返回x和y的最低值

　　Math.pow(x, y)　　返回x的y次冪

in 運算符

in運算符也是一個二元運算符，可是對運算符左右兩個操做數的要求比較嚴格。in運算符要求第1個（左邊的）操做數必須是字符串類型或能夠轉換爲字符串類型的其餘類型，而第2個（右邊的）操做數必須是數組或對象。只有第1個操做數的值是第2個操做數的屬性名，纔會返回true，不然返回false

　　in能夠用來判斷json裏面有沒有某個屬性

　　例：json = { name: jack, age: 30, name2: jone, name2: 26};

　　if ( "name" in json ){

　　console.log("yes");

　　}

　　else {

　　console.log("no");

　　}

數組經常使用方法

push() 向數組的末尾添加一個或多個元素，並返回新長度

unshift() 向數組的開頭添加一個或多個元素，並返回新長度

pop() 移除數組的最後一個元素，返回最後一個值(被移除的那個值)，這個方法沒有參數

shift() 移除數組的第一個元素，返回第一個值(被移除的那個值)，這個方法沒有參數

concat() 鏈接兩個數組，不影響原數組a = [1,2,3] b = [4,5,6] a.cconcat(b) == [1,2,3,4,5,6]

join() 返回一個數組轉化的字符串，原數組不會改變數組名. join(符號)

split() 返回一個由字符串轉化的數組，字符串中的分隔符號須要與方法中的符號一致

JSON

　　JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式，咱們稱之爲JavaScript對象表示法。

　　var json = {width:300, height:500, left:100};

　　JSON 遍歷

　　　　for in 關鍵字

　　　　for ( 變量 in 對象 ){

　　　　　　執行語句;

　　　　}

　　　　例子：

　　　　for ( attr in json ){

　　　　　　console.log(attr);　　//attr獲得的是屬性

　　　　　　console.log(json[attr]);　　//json[attr]獲得的是屬性的值

　　　　}

　　　　把最後一個json刪除,並把最後一個添加到json第一個位置

　　　　json.unshift(json.pop());

JS訪問CSS屬性的方法及對比

　　咱們訪問獲得css 屬性，比較經常使用的有兩種：

　　　　1. 利用點語法

　　　　　　語法：元素.style.屬性

　　　　　　　　例子：box.style.width　　box.style.top　　......

　　　　　　　　狀態：可讀可寫　　讀：行內式　　寫：行內式　　類型：string　　適用瀏覽器：全部

　　　　　　語法：元素.currentStyle.屬性

　　　　　　　　例子：box.currentStyle.width　　box.currentStyle.backgroundColor　　......

　　　　　　　　這一特定於 IE 的屬性應用於元素的全部 CSS 屬性的級聯組。它是 Window.getComputedStyle() 的僅用於 IE 的替代。

　　　　　　　　狀態：可讀可寫　　讀：行內式，內嵌式，外聯式　　類型：String　　適用瀏覽器：IE，opera

　　　　2. 利用 [] 訪問屬性

　　　　　　語法：元素.style[「屬性」]

　　　　　　　　例子：box.style[「width」]

　　　　　　　　最大的優勢：能夠給屬性傳遞參數

　　　　　　　　狀態：可讀可寫　　讀：行內式　　寫：行內式　　類型：String　　適用瀏覽器：全部

　　　　　　語法：Window.getComputedStyle("元素", "僞類")[「屬性」]　　w3c標準

　　　　　　　　兩個選項是必須的，沒有僞類用 null 替代

　　　　　　　　例子：window.getComputedStyle(box, null)["width"]

　　　　　　　　Window.getComputedStyle() 的返回值是一個 CSS2Properties 對象，其屬性是隻讀的。

　　　　　　　　狀態：只讀　　讀：行內式，內嵌式，外聯式　　類型：String　　適用瀏覽器：IE不支持

　　封裝返回style屬性的函數(兼容寫法)：

1        var demo = document.getElementById("demo");
2        function getStyle(obj,attr) {
3            if(obj.currentStyle){  // ie
4                return obj.currentStyle[attr];  
5            }
6            else {
7                return window.getComputedStyle(obj,null)[attr];  // w3c瀏覽器
8            }
9        }
10      console.log(getStyle(demo,"width"));

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。