[vue] document.querySelector(‘.xx‘).clientWidth 等于0

最新推荐文章于 2023-08-18 23:23:16 发布
最新推荐文章于 2023-08-18 23:23:16 发布
阅读量809 收藏
点赞数 1
分类专栏： # vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_14993591/article/details/124856352
版权
533_
关注
专栏目录
vue获取client为0_vue document.documentElement.clientHeight为0
weixin_39677106的博客
12-22 1757
其实也不是获取不到，正常手机都能获取的到，但是在个别手机上面获取不到，个别手机指的是华为P20。因为在Android端，如果你fbc之后getHeight()也是获取不到，我就想是不是mounted函数调用的时候，页面还没有渲染好呢，翻看了一下vue生命周期，果然是，于是我延迟300毫秒获取高度setTimeOut(()=>{...},300)并没有什么卵用，然后我灵光一现，发现vue有这么...
clientWidth/offsetWidth/scrollWidth获取为值非自身实际宽度而是屏幕宽度
bigPatrickstar的博客
05-07 563
clientWidth/offsetWidth/scrollWidth 今天碰到了三个老 6 获取值老是为屏幕的宽度而不是自身宽度，代码如下 <body> <div class="parent"> <div class="children"></div> </div> </body> <script> const element = document.querySelector(".children"); c
vue3：JS、TS关于doucument.querySelector()的基本使用
最新发布
qq_44670228的博客
08-18 2628
【代码】vue3：JS、TS、小程序，关于doucument.querySelector()的基本使用。
element的折叠面板内放标签页时，标签页的默认下划线clientwidth宽度为0的问题
ls
04-20 1218
如题：element的折叠面板内放标签页时，标签页的下划线初始化宽度为0的问题 在折叠面板中，使用组件套标签卡，会导致标签页的默认下划线clientwidth宽度为0的问题： <el-collapse v-model="activeNames"> <el-collapse-item v-for="(item, index) in themes" :name="index" :key="index"> <template slot="title">
querySelector
weixin_34399060的博客
02-15 219
this.el.nativeElement.querySelectorimport{Component,ElementRef,OnInit}from'@angular/core'; 转载于:https://www.cnblogs.com/yuyedaocao/p/10382096.html
一个document.documentElement.clientWidth为0的问题
weixin_34198797的博客
03-20 417
2019独角兽企业重金招聘Python工程师标准>>> ...
const handleScroll = (index: number,e:Event) => { const container = document.querySelector(".index_"+index) as HTMLElement const scrollWidth = container.scrollWidth; // 滚动宽度 const scrollLeft = container.scrollLeft; // 滚动条的左侧距离容器左侧的距离 const clientWidth = container.clientWidth; // 可见宽度 if(scrollLeft >= (scrollWidth - clientWidth ) || (scrollWidth - clientWidth ) < 5){ console.log('最右边了',index) jumpToDetailPage(index) } } 这个滚动条事件应该用节流还是防抖，怎么写，vue3+TS项目中
06-07
const container = document.querySelector(".index_"+index) as HTMLElement const scrollWidth = container.scrollWidth; // 滚动宽度 const scrollLeft = container.scrollLeft; // 滚动条的左侧距离容器...
请根据代码片段仿写实现div左下角拖拽移动用具体代码实现，import Vue from 'vue' Vue.directive('dialogZoomOut', { bind(el, binding, vnode, oldVnode) { let minWidth = 400;let minHeight = 300;let isFullScreen = false; let nowWidth = 0;let nowHight = 0;let nowMarginTop = 0;const dialogHeaderEl = el.querySelector('.el-dialog__header');const dragDom = el.querySelector('.el-dialog');dragDom.style.overflow = "auto";dialogHeaderEl.onselectstart = new Function("return false");dialogHeaderEl.style.cursor = 'move';const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);let moveDown = (e) => {const disX = e.clientX - dialogHeaderEl.offsetLeft;const disY = e.clientY - dialogHeaderEl.offsetTop;let styL, styT;if (sty.left.includes('%')) {styL = +document.body.clientWidth * (+sty.left.replace(/%/g, '') / 100);styT = +document.body.clientHeight * (+sty.top.replace(/%/g, '') / 100);} else {styL = +sty.left.replace(/px/g, '');styT = +sty.top.replace(/px/g, '');};document.onmousemove = function (e) {const l = e.clientX - disX;const t = e.clientY - disY;dragDom.style.left = `${l + styL}px`;dragDom.style.top = `${t + styT}px`;};document.onmouseup = function (e) {document.onmousemove = null;document.onmouseup = null;};}dialogHeaderEl.onmousedown = moveDown;dialogHeaderEl.ondblclick = (e) => {if (isFullScreen == false) {nowHight = dragDom.clientHeight;nowWidth = dragDom.clientWidth;nowMarginTop = dragDom.style.marginTop;dragDom.style.left = 0;dragDom.style.top = 0;dragDom.style.height = "100VH";dragDom.style.width = "100VW";dragDom.style.marginTop = 0;isFullScreen = true;dialogHeaderEl.style.cursor = 'initial';dialogHeaderEl.onmousedown = null;} else {dragDom.style.height = "auto";dragDom.style.width = nowWidth + 'px';dragDom.style.marginTop = nowMarginTop;isFullScreen = false;dialogHeaderEl.style.cursor = 'move';dialogHeaderEl.onmousedown = moveDown;}}let resizeEl = document.createElement("div");dragDom.appendChild(resizeEl);resizeEl.style.cursor = 'se-resize';resizeEl.style.position = 'absolute';resizeEl.style.height = '10px';resizeEl.style.width = '10px';resizeEl.style.right = '0px';resizeEl.style.bottom = '0px';resizeEl.style.zIndex = '99';resizeEl.onmousedown = (e) => {let clientX = e.clientX;let disX = e.clientX - resizeEl.offsetLeft;let disY = e.clientY - resizeEl.offsetTop;document.onmousemove = function (e) {e.preventDefault(); let x = e.clientX - disX + (e.clientX - clientX);let y = e.clientY - disY;dragDom.style.width = x > minWidth ? `${x}px` : minWidth + 'px';dragDom.style.height = y > minHeight ? `${y}px` : minHeight + 'px';};document.onmouseup = function (e) {document.onmousemove = null;document.onmouseup = null;};}}})
06-01
styL = +document.body.clientWidth * (+sty.left.replace(/%/g, "") / 100); styT = +document.body.clientHeight * (+sty.top.replace(/%/g, "") / 100); } else { styL = +sty.left.replace(/px/g, ""); ...
2022-02-05 window,html,body和document的区别,BOM和DOM相关知识点
GAARA
02-05 352
1.window,html,body和document的定义 html body window document 2.window,html,body和document的区别 3.document.body 和 document.documentElement的区别 4.document.body.clientWidth、document.documentElement.clientWidth和window.innerWidth的区别 示例 结论 5.复习:BOM和DOM BOM(Browser Objec
基于Vue2.x开发的音乐播放器app（推荐界面+懒加载+axios获取后端接口实现）
zxy9602的博客
11-25 6760
1、项目开发需求分析： 包含四个层面—— 2、项目开发流程 （1）搭建项目：借助vue-cli脚手架工具，具体请参考博客： ...； 由于项目存放在本地电脑E盘VueTest目录下， cd E:\VueTest 图1：切换项目存放目录、vue-cli搭建初始项目 通过脚手架vue-cli工具搭建项目 vue init webpack vue-music 选择配置项
关于JS获取clientWidth大小一直为0的问题
liuhui12345的博客
08-20 4243
__.clientWidth = 0; 因为父集用了display:none; 所以取不到值，将父集设置为display: block;就行了
document.querySelector()选择器的用法
qq_36465515的博客
12-10 3743
<html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="myId"></div> <div class="myClass"></div> </body> <script type="text/javascript"> var d
clientwidth_JavaScript中的clientWidth和clientHeight
08-13 656
clientwidthUsing clientWidth and clientHeight you’re able to get the pixel dimensions of an HTML element. The dimensions are calculated using the dimensions of content inside the HTML element, along w...
vue 中选择器的使用
qq_37570710的博客
03-29 763
3. 通过 this.$el.querySelector() 方法查找。2、通过 document.querySelector() 方法查找。1、通过 $refs 属性查找。
vue响应式网站PC端的宽度获取坑（已解决&新手向）
weixin_41033048的博客
05-30 849
一开始我是在mounted函数里面用这个方法获取宽度的document.body.clientWidth，结果出现了一加载进来就是值为0的情况。 找原因： 1.是不是watch监听不到所以为0，因此找深度监测去了，没卵用 2.是不是要写在created里面，或者update里，发现，没卵用 3.最后找的一个方法，原来是我的宽度获取的方式有问题，应该是document.documentElement.clientWidth 所以，问题就解决了 ...
vue js document.documentElement.scrollTop获取一直为0的解决方法
daishaochen的博客
09-15 6209
vue js document.documentElement.scrollTop获取一直为0的解决方法，vue封装组件后，常常是在组件里面继续轮滑，而document.documentElement.scrollTop拿到的是最外层浏览器的轮滑高度，所有一直是0。
vue中ref的作用
qq_29078779的博客
11-05 397
vue中的ref其实功能很强大，下面介绍一下如何使用。 基本用法，本页面获取dom元素 <template> <div id="app"> <div ref="testDom">11111</div> <button @click="getTest">获取test节点</button> </...
queryselector选择器注意事项
weixin_44849078的博客
05-05 6406
queryselector选择器使用时注意事项1、选择器命名有要求2、vue里使用时注意生命周期 1、选择器命名有要求 今天在vue项目中使用queryselector时报错，因为是根据数据直接生成的复选框，所以就用的数据id作为html标签的id，结果到了取值的时候却报错了。 "SyntaxError: Failed to execute ‘querySelector’ on ‘Document...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值