精华内容
下载资源
问答
  • Vue获取页面元素的相对位置

    千次阅读 2021-02-11 15:04:43
    今天在开发源码栏目,发现有一处需要获取元素的相对位置高度,发现getBoundingClientRect有一个问题,它是用于获取某个元素相对于视窗的位置集合,达不到我想要的要求,如是看到阮老师写的一篇文章,关于用...

    今天在开发源码栏目,发现有一处需要获取元素的相对位置高度,发现getBoundingClientRect有一个问题,它是用于获取某个元素相对于视窗的位置集合,达不到我想要的要求,如是看到阮老师写的一篇文章,关于用Javascript获取页面元素的位置,很好解决了我的问题,我也扩展关于其它方法

    发现问题

    当我滚动到元素的位置时候,我想把元素固定在头部

    // html 结构

    • 首页推荐
    • 最新发布

    复制代码export default {

    data(){

    return {

    isFixed:false,

    }

    },

    mounted(){

    if(this.$refs.subnav.getBoundingClientRect){

    this.scrollTop(this.$refs.subnav.getBoundingClientRect())

    }

    },

    methods:{

    // 这是封装的一个方法

    scrollTop(h){

    console.log(h);

    this.utils.scrollTop((res)=>{

    this.isFixed = res.scrollH > h ? true :false;

    })

    }

    }

    }

    复制代码

    utils.js

    // 该函数主要功能返回,滚动的高度以及文档占比窗口高度的百分比

    utils.scrollTop = function(callback){

    // 页面总高

    var totalH = document.body.scrollHeight || document.documentElement.scrollHeight;

    // 可视高

    var clientH = window.innerHeight || document.documentElement.clientHeight;

    var result = {}

    window.addEventListener('scroll', function(e){

    // 计算有效高

    var validH = totalH - clientH

    // 滚动条卷去高度

    var scrollH = document.body.scrollTop || document.documentElement.scrollTop

    // 百分比

    result.percentage = (scrollH/validH*100).toFixed(2)

    result.scrollH = scrollH;

    callback && callback(result)

    })

    }

    复制代码

    5c5d06f100059611d0671a9822e10fd0.png

    可以看到该元素的距离顶部595px,正常显示

    当我先滚动一段距离后,然后再次刷新,滚动条位置还会记录之前的位置,这是top为195px,这也是正常的,因为getBoundingClientRect是根据浏览器窗口进行定位置的

    而我想要的是想要不管浏览器滚动条位置在何处时刷新浏览器,我所绑定的dom元素都是根据文档左上角进行定位的

    fc3d03c9c515dba83ece7c16ef36fc11.png

    offsetTop

    网上有人说用offsetTop,其实offsetTop是对当前对象到其上级层顶部的距离。不能对其进行赋值.设置对象到页面顶部的距离请用style.top属性

    获取元素距离文档顶部距离

    返回值是一个 DOMRect 对象,这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合, 即:是与该元素相关的 CSS 边框集合。

    DOMRect 对象包含了一组用于描述边框的只读属性: left、top、right 和 bottom,单位为像素。除了 width 和 height 外的属性都是相对于视口的左上角位置而言的。

    getBoundingClientRect返回值

    top: 元素上边框距离视窗顶部的距离

    bottom: 元素下边框距离视窗顶部的距离

    left: 元素左边框距离视窗左侧的距离

    right: 元素右边框距离视窗左侧的距离

    复制代码

    由于getBoundingClientRect它们会随着视窗的滚动而相应的改变,那么元素距离页面顶部的距离就是,再加上滚动距离

    this.$refs.subnav.getBoundingClientRect().top + window.scrollY;

    或者

    this.$refs.subnav.getBoundingClientRect().top+document.documentElement.scrollTop;

    复制代码

    window.scrollY不兼容ie9,如需兼容请看Window.scrollY

    修改上方代码

    if(this.$refs.subnav.getBoundingClientRect){

    var top1 = this.$refs.subnav.getBoundingClientRect().top + window.scrollY

    var top2 = this.$refs.subnav.getBoundingClientRect().top+document.documentElement.scrollTop;

    console.log(top1)

    console.log(top2)

    this.scrollTop(top)

    }

    复制代码

    效果如下,不管滚动条何处位置都是一个相对文档最上面的左上角

    23aebfdd2741b58107275c919ddc8ab6.png

    阮一峰

    function getElementTop(element){

    var actualTop = element.offsetTop;

    var current = element.offsetParent;

    while (current !== null){

    actualTop += current.offsetTop;

    current = current.offsetParent;

    }

    return actualTop;

    }

    复制代码

    实现原理

    offsetTop可以返回元素距离offsetParent属性返回元素顶部的距离(如果父元素有定位的,那么将返回距离最近的定位元素,否则返回body元素,元素可能有多个定位元素,需要通过递归的方式层层获取距离,然后相加

    特别说明: 需要将body的外边距设置为0,这样元素距离body顶部的距离就等同于距离文档顶部的距离

    修改上方代码

    if(this.$refs.subnav.getBoundingClientRect){

    var top1 = this.$refs.subnav.getBoundingClientRect().top + window.scrollY

    var top2 = this.$refs.subnav.getBoundingClientRect().top+document.documentElement.scrollTop;

    // getElementTop在上方

    var top3 = getElementTop(this.$refs.subnav)

    console.log(top1)

    console.log(top2)

    console.log(top3)

    this.scrollTop(top)

    }

    复制代码

    效果如下

    e5d56cab48bfc4d577cb9218cf93d5a8.png

    总结三种方法获取元素距离文档顶部位置

    dom.getBoundingClientRect().top + window.scrollY;

    或者

    dom.getBoundingClientRect().top+document.documentElement.scrollTop;

    或者

    function getElementTop(element){

    var actualTop = element.offsetTop;

    var current = element.offsetParent;

    while (current !== null){

    actualTop += current.offsetTop;

    current = current.offsetParent;

    }

    return actualTop;

    }

    复制代码

    更多推荐

    关于我

    展开全文
  • 获取高度:要在钩子mounted里面dom结构生成后去获取dom的高度,宽度,修改样式等操作!!!mounted() {let h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; //...

    获取高度:

    要在钩子mounted里面dom结构生成后去获取dom的高度,宽度,修改样式等操作!!!

    mounted() {

    let h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; //浏览器高度

    let topH = this.$refs.topInfo.offsetHeight;

    console.log()

    let tabH = this.$refs.tab.offsetHeight;

    console.log()

    let subH = this.$refs.subBtn.offsetHeight;

    console.log()

    let scrollHight = this.$refs.scroller.offsetHeight

    this.height = (h - topH - tabH - subH) + "px"

    //localStorage.setItem("access_token", '52ecda6ecb4a11e7bd2a00163e0891fd') //测试token

    this.queryData(0)

    let w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;//浏览器宽度

    } //获取dom元素高度通过在标签里面定义ref属性,用this.$refs.自定义名称.offsetHight;去获取。

    还有其他获取指定高度的方式:

    //获取元素样式值,为元素ref="ele"(在样式里面写死了的高度)

    var heightCss = window.getComputedStyle(this.$refs.ele).height; // ?px

    //获取元素内联样式值

    var heightStyle =this.$refs.ele.style.height; // ?px

    javascript中获取dom元素高度和宽度

    javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...

    vue获取dom元素内容

    通过ref来获取dom元素 在vue官网上对ref的解释 ref 被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的 $refs 对象上.如果在普通的 DOM 元素上使用,引用指向的就是 D ...

    vue获取dom元素注意问题

    mounted(){ setTimeout(()=>{ this.contentToggle(); },1000) }, methods:{ contentToggle(){ console.l ...

    vue获取DOM元素并设置属性

    这里我想到了2个方法: 方法一: 直接给相应的元素加id,然后再document.getElementById("id");获取,然后设置相应属性或样式 方法二: 使用ref,给相 ...

    Vue 获取DOM元素ref

    =====我是li标 ...

    Vue 获取dom元素之 ref 和 $refs 详解

    一.$refs 一个对象,持有ref注册过的所有元素或子组件.(注册过的 ref 的集合) 二.ref 被用来给元素或子组件注册引用信息.若用在dom元素上,引用指向的就是dom元素:若用在子组件上, ...

    Vue获取DOM元素样式 && 样式更改

    在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 'style' is not definde的错误, 这时候可以在 mounted 里用 $refs 来获取样 ...

    随机推荐

    ios--进程/多线程/同步任务/异步任务/串行队列/并行队列(对比分析)

    现在先说两个基本的概念,啥是进程,啥是线程,啥又是多线程;先把这两个总是给弄清再讲下面的 进程:正在进行的程序,我们就叫它进程. 线程:线程就是进程中的一个独立的执行路径.这句话怎么理解呢! 一个程序 ...

    nginx配置文件nginx.conf超详细讲解

    #nginx进程,一般设置为和cpu核数一样worker_processes 4;                        #错误日志存放目录 error_log  /data1/logs/er ...

    leetcode@ [129] Sum Root to Leaf Numbers (DFS)

    https://leetcode.com/problems/sum-root-to-leaf-numbers/ Given a binary tree containing digits from 0 ...

    CSS的三种样式:内联式,嵌入式,外部式以及他们的优先级

    从CSS 样式代码插入的形式来看基本能够分为下面3种:内联式.嵌入式和外部式三种. 1:内联式css样式表就是把css代码直接写在现有的HTML标签中,如以下代码:

    新建web project不自动生成web.xml解决方案

    一步一步建立Web Project ,第3步会有 “Generate Web.xml deployment descriptor”,默认没勾选,勾上就行了

    js实现Mac触摸板双指事件(上、下、左、右、放大、缩小)

    前言 这几天在修复一个web问题时,需要捕获Mac触摸板双指事件(上.下.左.右.放大.缩小),但发现并没有现成的轮子,还是要自己造. 例如:jquery.mousewheel.js(添加跨浏览器的鼠 ...

    使用微软自带 SharpZipLib 进行多文件 压缩

    /// /// 指定路径打包下载 /// /// &lt ...

    Opencv画图操作

    1. 画矩形 MyRect rect;rect.left = 5;rect.top = 5;rect.right = 100;rect.bottom = 100;IplImage * pColorIm ...

    python 中面向对象的概念

    原文 域和作用空间 本地域,函数域(nonlocal)和 全局域(global) def scope_test(): def do_local(): spam = "local spam&q ...

    Python之旅:数据类型、字符编码、文件处理

    一 引子 1 什么是数据? x=10,10是我们要存储的数据 2 为何数据要分不同的类型 数据是用来表示状态的,不同的状态就应该用不同的类型的数据去表示 3 数据类型 以下每个类型都是有详细介绍链接的 ...

    展开全文
  • //template <div @click="add($event)... e.currentTarget //获取当前dom元素后可进行操作 //获取元素距离视口高度 var top1 = e.currentTarget.getBoundingClientRect().top //获取滚动条位置 var top2 = doc
    //template
    <div @click="add($event)")></div>
    <div class="top" ref="top"></div>
    
    //methods
    add(e){
    	e.currentTarget  //获取当前dom元素后可进行操作
    	//获取元素距离视口高度
    	var top1 = e.currentTarget.getBoundingClientRect().top  
    	//获取滚动条位置
    	var top2 = document.body.scrollTop||document.documentElement.scrollTop 
    	//相加即为元素实际顶部距离
    	var top = top1 + top2
    	//使用$ref修改top元素的位置
    	this.$ref.top.style.top = top + 'px';
    	//使用classList给top元素添加类名
    	this.$ref.top.classList.add("classname1");
    	//add、remove、toggle(检测是否有类名然后添加或删除)
    }
    
    展开全文
  • vue中将元素加入body

    2021-07-07 13:44:34
    // 将弹框加入Body中 addRemoveDateWinToBody(type) { this.$nextTick(() => { const body = document.querySelector('body') if (type) { // 显示 let zDateWin = this.$refs.zDateWin let pTabName = ...
      // 将弹框加入Body中
        addRemoveDateWinToBody(type) {
          this.$nextTick(() => {
            const body = document.querySelector('body')
            if (type) {
              // 显示
              let zDateWin = this.$refs.zDateWin
              let pTabName = zDateWin.parentNode ? zDateWin.parentNode.tagName : ''
              if (pTabName != 'body') {
                // 未加入,body,选择加入
                if (body.append) {
                  body.append(zDateWin)
                } else {
                  body.appendChild(zDateWin)
                }
              }
            } else {
              // 隐藏
              body.removeChild(body.lastChild)
            }
          })
        },

    展开全文
  • vue获取元素高度

    2021-04-30 17:02:54
    this.$refs.elementHeight.offsetHight这样返回undefined this.$refs['element'].offsetHeight 这样...如果元素要渲染的话放在this.$nextTick获取 this.$nextTick(()=>{ this.$refs['element'].offsetHeight })
  • 核心代码 <template> <div ref="obtain"></div> <template/> <... screenHeight: document.body.clientHeight // 获取页面高度 } }, mounted() { // 滚动条的获取
  • 我有一个卡元素和删除按钮作为此元素的子元素。我需要检查card元素子(.card-title)html值(jQuery&#39; s .html())是否等于localStorage(我用来循环遍历localStorage)对象)键点击删除按钮(卡片元素的子项和卡片的...
  • 前端开发JS获取页面元素的位置

    千次阅读 2021-01-30 13:29:35
    通常情况下,网页的大小由内容和document元素的clientHeight和clientWidth属性,就代表了网页的大小。function getViewport(){if (document.compatMode == “BackCompat”){return {width: document.body....
  • vue获取滚动条位置

    2021-06-13 00:40:08
    前言记录一下获取滚动条相对距离和绝对距离的方法说明(个人理解)相对距离当前滚动条到父滚动条的距离绝对距离当前滚动条到页面顶部的位置实例1.获取当前组件DOM标签滚动条位置// 为保证DOM节点加载完毕,要在 ...
  • 在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽略的一部分,要想写出预想效果的JavaScript代码,我们需要了解一些...
  • 1、在开始讲vue绑定事件之前先回顾一下原生的点击事件的写法 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="./assets/jquery-2.2.1.min.js"></script&...
  • VUE如何实时监听元素距离顶部高度

    千次阅读 2020-12-23 04:30:17
    VUE如何实时监听元素距离顶部高度发布时间:2020-07-30 09:09:43来源:亿速云阅读:150作者:小猪这篇文章主要讲解了VUE如何实时监听元素距离顶部高度,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读...
  • view class="body" ref="body"> <u-button type="primary" @click="goMy">去我的页面</u-button> <u-button type="success" @click="goLoginOut">退出登陆</u-button> </view
  • 这是我在写vue项目里封装的一个公共js类里面还有一些其他的方法,一并拿过来了class Public {isDesktop(){ //判断是否为pc端return (window.screen.width > 1023) ? true : false;}/** formatMoney(s,type)* 功能...
  • mounted() { // let _this=this window.addEventListener('scroll', () => { let top = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset ...
  • <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">...meta name="viewport" content="width=device-width, initial-scale=1.0">...body> <div id=".
  • 如何获取元素距离页面顶部的高度

    千次阅读 2020-12-20 20:40:40
    展开全部页面元素距离浏览器工作区顶端的距离 = 元素距离文档顶636f70793231313335323631343130323136353331333365646262端偏移值 - 网页被卷起来的高度即:页面元素距离浏览器工作区顶端的距离 = DOM元素对象....
  • document.body.scrollTop || //chrome window.pageYOffset //safari 打印出来的结果都是0,原因我还没有找到,但是需求还是要实现的 然后开始找问题,发现body的高度始终都没有变过 既然是滑动,那么
  • 不用jquery的情况下,因为用的是vue框架,获取元素到页面顶端的距离demo的代码如下:问题1 offsetTop只能获取到有定位元素父级的距离,怎么获取到页面顶端距离呢问题2 子级有了transform 24px但offsetTop却获取不到 ...
  • 1.在模板的中,要获取的标签元素中加上 ref属性- - -ref=“名称” 2.在setup()函数中使用 同步数据ref,定义一个跟上面同名的变量,固定写法: const hello = ref(null) 3.setup()将该字段返回 代码示例: <!...
  • 需要在本页面中展示 Vue 组件中的超链接,地址栏不改变的方法:GoBack{{item.name}}export default {name: 'hello',data () {return {iframeState:false,goBackState:false,webAddress: [{name:'简书',link:'...
  • 展开全部页面元素距离浏览器工作区顶端的距离 = 元素距离文档顶端偏移值32313133353236313431303231363533e4b893e5b19e31333365633939 - 网页被卷起来的高度即:页面元素距离浏览器工作区顶端的距离 = DOM元素对象....
  • Vue本来无需操作DOM来更新界面,而且Vue也不推荐我们直接操作DOM,但是我们...body> <div id="aa"> <input type="button" value="点击" v-on:click='fun'/> </div> <script> new Vue({
  • <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">...meta name="viewport" content="width=device-width, initial-scale=1.0">...body> <div id=".
  • vue是数据驱动视图,所以要尽量改变熟悉的操作DOM的方法,只需操作data里的数据即可达到想要的效果。这里用v-for去渲染列表就行了,代码如下(最好加上key)://td较少的情况//HTMLindex为{{index}},星宿:{{item.star...
  • <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">...meta name="viewport" content="width=device-width, initial-scale=1.0">...body> <div id=".
  • vue从mounted钩子函数开始可以获取和操作dom,此前操作DOM浏览器会报错。 vue生命周期Vue 实例 测试代码如下。在每个钩子函数中添加相应的DOM,测试能否获取及修改DOM。 <template> <div id="body"> &...
  • 核心代码为:let dom = this.$refs.dataTable.$el.getElementsByClassName("el-table__body-wrapper is-scrolling-none"); /*页面滚动事件method方法体内定义*/ scollerFunc(){ let dom = this.$refs.dataTable....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 19,995
精华内容 7,998
关键字:

vue获取body元素

vue 订阅