待整理

时间 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"));