html更改offset,javascript – HTML offsetLeft延迟更改

我的屏幕上有四个画布,上面有两个,下面有两个.

每个人都有一个按钮,可以最大化画布,隐藏其他画布.

此按钮位于每个画布上方,绝对位置基于画布的offsetTop和offsetLeft.

但是,当我最大化或最小化画布时,按钮公式仅更新width属性.

奇怪的是,如果我调整屏幕大小,也调用调整大小功能,一切都会到达正确的位置.

编辑：附加信息：我正在使用VueJS,为了隐藏其他画布,我将v-show =“false”应用于它们的父div,它只应用display：none.

一些片段：

初始调整大小和监听器：

window.onload = function () {

resizeAll();

window.addEventListener('resize', resizeAll, false);

};

调整大小的中心：

function resizeAll () {

vue.$refs.panelOne.resizeDefault();

// ...

vue.$refs.panelN.resizeDefault();

}

面板调整大小默认和调整大小的方法. “expandStyles”是应用于按钮的css样式：

resizeDefault() {

let dimensions;

if (this.expanded) {

dimensions = getScreenDimensions();

} else {

dimensions = getHalfScreenDimensions();

}

this.resize(dimensions.width, dimensions.height);

}

resize (width, height) {

this.canvas.width = width;

this.canvas.height = height;

this.expandStyles.top = (this.canvas.offsetTop + 10) + 'px';

this.expandStyles.left = (this.canvas.offsetLeft + this.canvas.width - 40) + 'px';

drawInterface.redraw();

}

最后,尺寸吸气剂：

function getScreenDimensions () {

return {

width: window.innerWidth - 310,

height: window.innerHeight * 0.92

};

}

function getHalfScreenDimensions () {

return {

width: (window.innerWidth - 310) / 2,

height: (window.innerHeight * 0.92) / 2

};

}

html更改offset,javascript – HTML offsetLeft延迟更改相关推荐

html更改offset,div的offsetLeft与style.left区别
clientX 事件属性返回当事件被触发时鼠标指针向对于浏览器页面(或客户区)的水平坐标. 客户区指的是当前窗口. 如果父div的position定义为relative,子div的position定义 ...
JavaScript实现计算需要更改的位数，以便将 numberA转换为 numberB(bitsDiff)算法（附完整源码）
JavaScript实现计算需要更改的位数,以便将 numberA转换为 numberB(bitsDiff)算法(附完整源码) countSetBits.js完整源代码 bitsDiff.js完整源代 ...
详解 javascript中offsetleft属性的用法（转）
详解 javascript中offsetleft属性的用法转载 2015-11-11 投稿:mrr 我要评论本章节通过代码实例介绍一下offsetleft属性的用法,需要的朋友可以做一 ...
服务器挂起文件怎么删除,撤消挂起的更改或查看挂起的更改的列表
撤消挂起的更改或查看挂起的更改的列表 10/11/2017 本文内容您可以随时查看源控件下某个解决方案挂起的更改的列表,或者可以撤消所做的任何文件更改,以便还原上次签入到 Team Foundati ...
如何更改文件夹的图标!如何更改文件的图标!
在windows系统下,怎样使自己的文件夹/ 文件等东西,的图标,变的好看. 怎么更改文件夹的图标!如何更改文件的图标! 呵呵先怎么更改文件夹的图标! 有时候文件夹太多了,想要找到哪个程序的文 ...
如何更改html的默认应用,win10更改默认打开程序设置方法_win10怎么更改应用默认打开方式-win7之家...
在使用win10系统过程中,对于一些需要借助工具才能够打开的文件,我们每次在打开之前都会有一个选择打开的程序,对此有些用户就想要将其设置成默认打开方式,以此来较少一些不必要的选择,那么win10怎么更 ...
【MATLAB第11期】#源码分享 |时间序列数据绘图，横坐标更改为时间轴横坐标轴参数更改日期间隔设置日期标签或格式更改
[MATLAB第11期]#源码分享 |时间序列数据绘图,横坐标更改为时间轴横坐标轴参数更改绘图问题解决方案 1.导入数据方式(识别时间数据) 2.案例展示 (1)打开数据 (2)定义时间和数据 ( ...
focusky如何转成html,Focusky怎样更改交互动作 Focusky交互动作更改办法
Focusky怎样更改交互动作 Focusky交互动作更改办法发表时间:2018-10-04 来源:必杀器整理软件安装:装机软件关于电脑装机必须的软件,比如windows office系列办公软 ...
仿小米导航栏；导航栏悬浮滚动更改背景色javascript实现；
一.实现效果小米字体没引用,导航栏文字随便调的,仅供参考二.代码 1.html <!DOCTYPE html> <html lang="en">< ...

html更改offset,javascript – HTML offsetLeft延迟更改

html更改offset,javascript – HTML offsetLeft延迟更改相关推荐

最新文章

热门文章