转行学前端的第 55 天 : 了解 BOM window 对象(2)

我是小又又,住在武汉,做了两年新媒体,准备用 6 个月时间转行前端。

昨天主要基于搜索基础学习 BOM window 对象基础定义和宽度高度相关属性 ,今天主要开始基于搜索基础学习控制窗体移动大小变化,又是适合学习的一天,加油,小又又!!!!


  • window.resizeBy()
  • window.resizeTo()
  • window.moveBy()
  • window.moveTo()

window.resizeBy(xDelta, yDelta) 

  • xDelta
    为窗口水平方向变化的像素值。

  • yDelta
    为窗口垂直方向变化的像素


调整窗口大小。

该方法相对于窗口当前大小来调整该窗口的大小。要以绝对大小方式调整窗口的大小,可使用 window.resizeTo

从 Firefox 7,依据下面的规则,不能再调整浏览器内一个窗口的默认大小了:

  • 不能调整非 window.open 方法打开的窗口或 Tab 的大小。
  • 当一个窗口内包含有一个以上的 Tab 时,不能调整窗口的大小。

window.resizeBy(-200, -200);

没有效果啊~~~~


window.resizeTo(aWidth, aHeight) 

  • aWidth
    是一个整数,表示新的 outerWidth(单位:像素)(包括滚动条、窗口边框等)。

  • aHeight

是一个整数,表示新的 outerHeight(单位:像素)(包括滚动条、标题栏、窗口边框等)。


动态调整窗口的大小。

从 Firefox 7 开始,不能改变浏览器窗口的大小了,要依据下面的规则:

  • 不能设置那些不是通过 window.open 创建的窗口或 Tab 的大小。
  • 当一个窗口里面含有一个以上的 Tab 时,无法设置窗口的大小。

// 将窗口设置为整个屏幕的 1/4 大小(面积)
function quarter() {
  window.resizeTo(
    window.screen.availWidth / 2,
    window.screen.availHeight / 2
  );
}
quarter();

没效果???????


window.moveBy(deltaX, deltaY) 

  • deltaX
    表示窗口在水平方向移动的像素值。

  • deltaY
    表示窗口在垂直方向移动的像素值。


根据指定的值,移动当前窗口。

可以使用负值作为该函数的参数。该函数产生相对移动,而 window.moveTo 产生一个绝对移动。

从 Firefox 7 开始,依据下面的规则,不能再移动一个浏览器里的窗口。

  • 不能移动非 window.open 创建的窗口或 Tab。
  • 当一个窗口里有多于一个 Tab 时,不能移动该窗口。

function budge() {
  moveBy(1000, -1000);
}
budge();

好像没看到变化~~


window.moveTo(x, y) 

  • x
    是要移动到的位置横坐标

  • y
    是要移动到的位置纵坐标


将当前窗口移动到指定的坐标位置。


function origin() {
  // 把窗口移动到左上角
  window.moveTo(0, 0);
}
origin();

为啥没效果?????



今天主要基础了解了一下控制窗体移动大小变化,为何都没效果呢,好难受,希望明天学习更多~~~~

本文使用 mdnice 排版

https://juejin.im/post/5ed51cc36fb9a047f6104b6a

「点点赞赏,手留余香」

    还没有人赞赏,快来当第一个赞赏的人吧!
0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论