zoukankan      html  css  js  c++  java
  • JS_高程8.BOM window对象(1)

    1.全局作用域

    1 var age = 14;
    2 window.coloer = "pink";
    3 
    4 console.log(delete window.age);//false 使用var语句添加的window属性的[[Configurable]]的特性的值为false,因此不能通过delete操作符删除。
    5 console.log(delete window.color);//true
    6 
    7 console.log(window.age);//14
    8 console.log(window.color);//undefined

    2.关于尝试访问未声明变量

    1 var newValue = oldValue;//报错:oldValue is not defined 
    2 
    3 var newValue = window.oldValue;//不会报错,是一次属性查询
    4 console.log(newValue);//undefined

    3.窗口位置

    1 var leftPos = (typeof window.screenLeft == "number" ) ? window.screenLeft : window.screenX;
    2 var topPos = (typeof window.screenTop == "number" ) ? window.screenTop : window.screenY;
    3 
    4 console.log(leftPos,topPos);/*这里浏览器窗口位置改变,坐标也会相应的改变,在Chrome浏览器中,全屏世的坐标是(0,0)*/

    4.移动窗口的位置,以下代码是在IE浏览器中测试,Chrome浏览器没有效果。

    1 window.moveTo(0,0);/*每刷新一次,移动到(0,0),即屏幕左上角*/
    2 window.moveBy(0,100);/*每刷新一次,向下移动100px*/
    3 window.moveTo(200,300);/*每刷新一次,移动到(200,300)*/
    4 window.moveBy(-50,0);/*每刷新一次,向左移动50个像素*/

    5.窗口大小

     1 ar pageWidth = window.innerWidth,
     2     pageHeight = window.innerHeight;
     3 
     4 if(typeof pageWidth != "number"){
     5     if(document.compatMode == "CSS1Compat"){
     6         pageWidth = document.documentElement.clienWidth;
     7         pageHeight = document.documentElement.clienHeight;
     8     }else{
     9         pageWidth = document.body.clienWidth;
    10         pageHeight = document.body.clienHeight;
    11     }
    12 
    13 }
    14 console.log(pageWidth,pageHeight);

    注意:将浏览器最大化,高度为984px(?除去上面标签栏的高度)

    6.调整浏览器窗口,在IE浏览器中测试

    1 window.resizeTo(100,100);
    2 window.resizeBy(100,50);/*每刷新一次,宽度增加100px(向右),高度增加50px(向下)*/
  • 相关阅读:
    elementui表单输入框部分校验--判断
    vue学习如何引入js,封装操作localStorage本地储存的方法
    vue组件传值 递增次数传递bug修复
    vue深度监听之手机格式344
    vue-------滑动验证
    vue get/post请求如何携带cookie的问题
    elementui的dialog组件踩坑
    WebStorm License Activation (WebStorm许可证激活)
    input 标签实现带提示文字的输入框
    隐藏 input 标签的边框
  • 原文地址:https://www.cnblogs.com/LinSL/p/7419670.html
Copyright © 2011-2022 走看看