精华内容
下载资源
问答
  • vue获取dom元素高度的方法

    千次阅读 2020-01-02 11:50:40
    本文转载自:...获取高度: <div ref="自定义名称" ></div>要在钩子mounted里面dom结构生成后去获取dom高度,宽度,修改样式等操作!!! mounted() { let h = window.innerH...
    本文转载自:
    https://www.cnblogs.com/lhl66/p/7908133.html  作者:lhl66 转载请注明该声明。
    

    获取高度:

    <div ref="自定义名称" >

    </div>
    要在钩子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

     

    展开全文
  • 主要介绍了解决vue项目获取dom元素宽高总是不准确问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue无法获取dom元素高度的解决方案

    千次阅读 2020-06-30 16:14:33
    如何dom元素没有设置高度高度是自适应的,是无法直接获取高度的, 解决方法如下,在获取高度时加个延迟器: outoHeightFn(){ setTimeout(() => { let dom = this.$refs.remark; const height = dom....

    如何dom元素没有设置高度或高度是自适应的,是无法直接获取的高度的,
    解决方法如下,在获取高度时加个延迟器:

    outoHeightFn(){ 
        setTimeout(() => {
            let dom = this.$refs.remark;
            const height = dom.offsetHeight;
            if(height < 300){
                dom.style.height = '300px';
            }
        }, 300);
    }, 
    
    展开全文
  • vue获取dom宽度高度

    2021-06-02 16:04:43
    console.log('宽度') console.log(this.$refs['dialogForm'].$el.clientWidth) console.log('高度') console.log(this.$refs['dialogForm'].$el.clientHeight)
    console.log('宽度')
            console.log(this.$refs['dialogForm'].$el.clientWidth)
            console.log('高度')
            console.log(this.$refs['dialogForm'].$el.clientHeight)
    
    展开全文
  • vue获取dom高度

    万次阅读 2019-02-11 10:57:23
    //获取高度值 var height= this.$refs.text.offsetHeight; //100 //获取元素样式值,element 为元素ref="element" var heightCss = window.getComputedStyle(this.$refs.element).height; // 100px //...
    //获取高度值
    var height= this.$refs.text.offsetHeight; //100
    
    
    //获取元素样式值,element 为元素ref="element"
    var heightCss = window.getComputedStyle(this.$refs.element).height; // 100px
    
    
    //获取元素内联样式值
    var heightStyle =this.$refs.element.style.height; // 100px

     

    展开全文
  • vue获取dom元素内容

    千次阅读 2020-12-19 16:54:35
    通过ref来获取dom元素vue官网上对ref的解释ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的$refs对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素; 如果用在子组件上,引用就指向...
  • //获取元素样式值,为元素ref="ele"(在样式里面写死了的高度) var heightCss = window.getComputedStyle(this.$refs.ele).height; // ?px //获取元素内联样式值 var heightStyle =this.$refs.ele.style.height; //...
  • vue获取dom元素的宽高

    2021-01-30 13:29:38
    // 元素上加上ref在mounted写 因为我是html标签可以不用加el(如果是html标签就不用加)this.$refs.tooltipRef.offsetWidththis.$refs.tooltipRef.$el.offsetWidth建议在this.$nextTick写this.$nextTick(() =>...
  • Vue获取DOM元素样式和样式更改

    千次阅读 2019-04-17 09:26:14
    Vue获取DOM元素样式和样式更改 在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 ‘style’ is not definde的错误, 这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: <template...
  • vue获取DOM元素并设置属性

    千次阅读 2019-10-01 19:47:50
    这里我想到了2个方法: 方法一: 直接给相应的元素加id,然后再document.getElementById("id");获取,然后设置相应属性或样式 方法二: 使用ref,给相应的元素加ref=“...
  • vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 'style' is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改:export default {mounted () {console.log(this....
  • VUE3 获取元素高度

    千次阅读 2021-09-10 09:16:58
    import { ref, reactive, onMounted, watch } from 'vue' setup() { let clientHeight = ref('') //浏览器可视区域高度 const headerRef = ref(null) const tagsRef = ref(null) let slbHeight = .
  • 本文主要介绍了无法获取隐藏元素(display:none)宽度(width)和高度(height)的解决方案,具有很好的参考价值。下面跟着小编一起来看下吧
  • 使用 vue 的时候,想要获得一个指定的元素高度时,可以使用 vue 中的ref 。 当 ref 加在普通的元素上,使用 this.ref.name 获取到的是 dom 元素 示例 写在 页面 html 部分的 <div ref="init"></...
  • 首先监听这个动态元素的变化,在this.$nextTick中获取dom元素,但我获取的时候是不准确的,所以就加了个延时器,就能获取dom元素准确的高度啦 <template> <img ref="bottomBtn" :src=...
  • 就能获取到该dom元素的width 二、document.querySelector('DOM元素').style document.querySelector('.dingwei').style.height 三、styleSheets样式表 styleSheets能获取页面所有的dom节点的样式 document....
  • vue 获取动态元素高度

    千次阅读 2020-12-19 18:26:11
    2017.10.25凌晨坑死了~因为要在页面中搞一个区域用来scroll列表,所以必须要获取scroll-wrap的高度,于是想...在vue2.0里,如何获取dom元素的样式(样式是动态变化的)nextTick试过,querySelector试过但就是this.$re...
  • vue 获取动态元素高度--采坑

    千次阅读 2020-03-30 15:06:22
    页面中搞一个区域用来scroll列表,所以必须要获取scroll-wrap的高度,于是想尽办法获取swipe、navbarBox的高度 <div v-if="data[column]"> <div class="columnPage" v-for='(item,index) in data' v-show=...
  • 主要介绍了VUE实时监听元素距离顶部高度的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 在export default {mounted () {console.log(this.$refs.abc....如果我们给一个div设定全屏背景图,就需要获取屏幕高度进行赋值:export default {mounted () {let w = window.innerWidth || document.documentEle...
  • 网页可见区域宽或高、网页正文全文宽或高以及网页正文部分左或右,详细请看下文,希望对大家有所帮助
  • vue项目获取dom元素宽高总是不准确

    千次阅读 2020-01-15 16:26:39
    dom元素内部内容是动态的,重置数据...原因:重置数据后获取dom元素宽高时,dom元素还未渲染完毕; 解决方法:利用Vue.nectTick(callback) this.$nextTick(() => { this.$refs.editor[0].offsetHeight; }) Vu...
  • getHeight(dom) { console.log(this.$refs.[dom].$el.offsetHeight) // 获取高度 ...// offsetHeight //返回元素的高度(包括元素高度、内边距和边框,不包括外边距) // clientWidth //返回元.

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,563
精华内容 2,225
关键字:

vue获取dom元素的高度

vue 订阅