JavaScript常见对象操作：事件对象、异步执行、Scroll、Offset、获取屏幕可视区域、onresize、缓动动画、Js获取CSS属性

最新推荐文章于 2023-03-09 23:29:23 发布

我想_iwant

最新推荐文章于 2023-03-09 23:29:23 发布

阅读量288

点赞数 1

本文链接：https://blog.csdn.net/qq_20535249/article/details/96271831

版权

网页可见区域宽： document.body.clientWidth;
网页可见区域高： document.body.clientHeight;
网页可见区域宽： document.body.offsetWidth (包括边线的宽);
网页可见区域高： document.body.offsetHeight (包括边线的宽);
网页正文全文宽： document.body.scrollWidth;
网页正文全文高： document.body.scrollHeight;
网页被卷去的高： document.body.scrollTop;
网页被卷去的左： document.body.scrollLeft;

pageX/pageY、screenX/screenY、clientX/clientY的区别

screenX/screenY 是以屏幕为基准进行测量，即：当前元素距离屏幕的尺寸
pageX 和 pageY 是以当前文档（绝对定位）为基准，不适用于IE6-8;
clientX 和 clientY 是以当前可视区域为基准，类似于固定定位。

offsetWidth 和 offsetHeight
获取对象自身的宽度和高度，包括内容、边框和内边距，即：offsetWidth = width + border + padding
注意：和 div.style.width 的区别，其只能获取到行内的数值

offsetLeft 和 offsetTop
距离第一个有定位的父级盒子左边和上边的距离，注意：父级盒子必须要有定位，如果没有，则最终以body为准！
总结：offsetLeft和offsetTop从从父标签的padding开始计算，不包括border。即：从子盒子边框到定位父盒子边框的距离。

offsetParent
返回当前对象的父级（带有定位）盒子，可能是父亲、也可能是爷爷：
如果当前元素的父级元素没有进行CSS定位（position：absolute 或 relative），则其offsetParent为body；如果当前元素的父级元素中有CSS定位（position：absolute或relative），offsetParent取最近的那个父级元素。

offsetXXX 和 style.XXX的区别
用offsetLeft和style.left来分析，其他的以此类推：
a) style.left只能获取行内的，而offsetLeft则可以获取到所有的；
b) offsetLeft 可以返回没有定位盒子距离左侧的位置；而style.left不可以，其只能返回有定位盒子的left;
c) offsetLeft 返回的是数字，而 style.left 返回的是字符串，除了数字外还带有单位：px;
注意：可以用parseInt进行转化；比如：styleLeft=‘300px’ —> parseInt(styleLft) —> 300
d) offsetLeft是只读的，而style.left是可读写；
e) 如果没有给当前元素指定过 top 样式，则 style.top 返回的是空字符串。

事件对象

  btn.onclick = function(event){  // event就是当前事件的对象，简称事件对象
    
   }

只要触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。所有浏览器都支持event对象，但支持的方式不同。比如：IE6-8只能通过window.event获取事件对象，而其他的则可以直接获取。通常，考虑兼容性的写法：

var event = event || window.event;

event对象的属性及用途
在这里插入图片描述

防止拖动时选中内容
防止拖拽的时候选中拖拽区域中的内容，代码如下：

window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

异步执行
代码各自执行各自的，互相独立。
所有被鼠标触发的事件都可以认为是异步，互相独立。还有一个需要注意的就是定时器中的代码都是异步的，也是互相独立。

Scroll
网页正文全文宽： document.body.scrollWidth;
网页正文全文高： document.body.scrollHeight;
网页被卷去的高： document.body.scrollTop;
网页被卷去的左： document.body.scrollLeft;
在实际开发中使用比较多的就是scrollTop

处理scroll家族浏览器适配问题
ie9+ 和最新浏览器

    window.pageXOffset; （scrollLeft）
    window.pageYOffset; （scrollTop）

Firefox浏览器和其他浏览器

document.documentElement.scrollTop;

Chrome浏览器和没有声明 DTD

document.body.scrollTop;

兼容写法
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0; var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;

scrollTo(x,y)
把内容滚动到指定的坐标
格式：scrollTo(xpos,ypos)

xpos 必需；要在窗口文档显示区左上角显示的文档的 x 坐标；
ypos 必需；要在窗口文档显示区左上角显示的文档的 y 坐标。
网页大部分都没有水平滚动条，所以，这个x 不太常用。

获取屏幕的可视区域

ie9及其以上的版本、最新浏览器

window.innerWidth, window.innerHeight
标准模式浏览器

document.documentElement.clientWidth, document.documentElement.clientHeight
怪异模式

document.body.clientWidth, document.body.clientHeight
通用写法

function client() {    
       if(window.innerWidth){ // ie9及其以上的版本  
           return{           
               width: window.innerWidth,
               height:  window.innerHeight  
           }    
       }else if(document.compatMode != 'CSS1Compat'){  // 怪异模式  
           return{           
               width: document.body.clientWidth,            
               height: document.body.clientHeight       
           }    
       }  
       // 标准    
       return{      
             width: document.documentElement.clientWidth,        
             height: document.documentElement.clientHeight   
       }
}

常用窗口事件-onresize
当窗口或框架的大小发生改变的时候就会调用；
onresize一般被运用于自适应页面布局等多屏幕适配场景；
应用：当屏幕的宽度>=960时，页面的背景颜色为红色；当屏幕的宽度>=640时，页面的背景颜色为蓝色；当屏幕的宽度<640时，页面的背景颜为绿色？
补充：获取屏幕的分辨率：window.screen.width window.screen.height

冒泡机制
气泡从水底开始往上升，由深到浅，升到最上面。在上升的过程中，气泡会经过不同深度层次的水。相对应地：这个气泡就相当于我们这里的事件，而水则相当于我们的整个dom树；事件从dom 树的底层，层层往上传递，直至传递到dom的根节点。

IE 6.0: div -> body -> html -> document
其他浏览器: div -> body -> html -> document -> window
注意：不是所有的事件都能冒泡，以下事件不冒泡：blur、focus、load、unload

阻止冒泡的方法
标准浏览器和 ie浏览器

w3c：event.stopPropagation() proPagation 传播 传递
IE：event.cancelBubble = true bubble 冒泡 cancel 取消

兼容的写法

if(event && event.stopPropagation){ // w3c标准    
    event.stopPropagation();
}else{ // IE系列 IE 678    
    event.cancelBubble = true;
}

获取当前操作对象

开发中，当执行一个事件时需要去知道触发这个事件的对象是谁？那么，如何获取：
火狐、谷歌 event.target
ie 678 event.srcElement

一般是获取这个对象的id，兼容的写法如下：

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

获取用户选中的内容
标准浏览器

window.getSelection()

ie 获得选择的文字

document.selection.createRange().text;

兼容性的写法

var selectedText;
if(window.getSelection){ // 标准模式 获取选中的文字    
   selectedText = window.getSelection().toString();
}else{ // IE 系列   
   selectedText = document.selection.createRange().text;
}

微博分享API

http://v.t.sina.com.cn/share/share.php?searchPic=false&title=' + shareText + '&url=https://github.co

缓动动画原理

缓动动画的原理: 盒子本身的位置 + 步长 (不断变化的，由大变小)
步长：begin = begin + (end - begin) / 缓动系数

基本的缓动动画函数：
// 缓动动画
// 谁目标

function buffer(obj, target) {  
    // 1. 清除定时器    
    clearInterval(obj.timer);    
    // 2. 设置定时器    
    obj.timer = setInterval(function () {        
           // 2.1 求出步长        
           var speed = (target - obj.offsetLeft) / 20;        
           console.log(speed);        
           speed = speed > 0 ? Math.ceil(speed): Math.floor(speed);        
           console.log(speed);        
           // 2.2 设置动画        
           obj.style.left = obj.offsetLeft + speed + 'px';        
           obj.innerHTML = obj.offsetLeft;        
           // 2.3 清除定时器        
           if(obj.offsetLeft == target){           
                  clearInterval(obj.timer);        
            }    
            }, 20);
}

完整版缓动动画：

 /* 
   * 缓动动画 
   * obj: 要做动画的元素 
   * json: 要做动画的属性键值对
   * fn: 回调函数 
  */ 
  function Buffer(obj, json, fn) {     
      // 1. 清除定时器     
      clearInterval(obj.timer);     
      // 2. 设置定时器     
      var flag = true, begin, target;
      obj.timer = setInterval(function () {         
          // 2.1 遍历json         
          for(var k in json){             
             // 2.1.1 获取做动画属性的初始值            
             if('opacity' == k){ // 透明度               
                begin = parseInt(parseFloat(getCssStyleAttr(obj, k)) *100) || 0;  
                target = parseInt(parseFloat(json[k])*100); 
             }else { // 其他动画               
                begin = parseInt(getCssStyleAttr(obj, k));   
                target = parseInt(json[k]);    
             }             
             // 2.1.2 获取动画的步长      
             var speed = (target - begin) / 20;
             speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
             // 2.1.3 设置缓动动画
             if('opacity' == k ){ // 透明度
                   obj.style.opacity = (begin + speed) / 100;
                   obj.style.filter = 'alpha(opacity='+ (begin + speed) +')';
             }else if('zIndex' == k){
                   obj.style.zIndex = json[k];
            }else { // 其他情况 
                  obj.style[k] = begin + speed + 'px'; 
            }            
            // 2.1.4 判断是否清除定时器
            flag = (begin != target) ? false : true;
           }         
           // 2.2 清除定时器
           if(flag){
               clearInterval(obj.timer);
               //判断
               if(fn){
                   fn(); // 执行函数
               }
           }
       }, 20); 
  }

  function $(id) {
      return document.getElementById(id);
  }

  function getCssStyleAttr(obj, attr) {
      if(obj.currentStyle){
          return obj.currentStyle[attr];
      }else {
          return window.getComputedStyle(obj, null)[attr];
      }
  }

常见的 js访问行内CSS 属性
在开发中，访问得到css 属性，比较常用的有两种：

点语法:
box.style.width，box.style.height，box.style.top，box.style.left 得到带有单位的属性值，比如：200px；但是，点语法存在一个很致命的问题，跟在style后面的属性不能由外面传入
```
var h = 'height'; 
 box.style.h = 300 + 'px';
```
2.下标语法
利用 [] 访问属性元素.style[“属性”];
这种语法的好处就是可以动态的传递参数作为属性
```
  var h = 'height';
  box.style[h] = 300 + 'px';
```

JS获取CSS的样式

在开发中，我们想要获得css 的样式，通常采用：box.style.top ，box.style.backgorundColor等，但这种方式只能得到行内样式，而平常用的最多的是页内样式或者外部样式，那我们如何解决这样的问题？

在IE和Opera浏览器

obj.currentStyle

其他W3C标准浏览器

window.getComputedStyle("元素", "伪类") （ 注意：两个选项是必须的， 没有伪类 用 null 替代 ）

兼容写法

function getStyleAttr(obj, attr) {    
    if(obj.currentStyle){ // IE 和 opera        
         return obj.currentStyle[attr];    
    }else {        
         return window.getComputedStyle(obj, null)[attr]; 
    }
}