精华内容
下载资源
问答
  • js如何获取元素的宽高

    js如何获取元素的宽高


           web开发中经常需要获取元素的宽高。


           实现方法如下:


          js:

      

    var width = getWH(noticeImg, 'width');  
    			  var height = getWH(noticeImg, 'height');
                  var wBh = width/height;
                  alert("width:"+width);
                                alert("height"+height);
    
                  noticeImg.style.width=(width/3)+ 'px';
                  noticeImg.style.height=(height/3)+ 'px';
    
    
    
    function getStyle(el,name) {
            if(window.getComputedStyle) {
                return window.getComputedStyle(el, null)[name];
            }else{
                return el.currentStyle[name];
            }
        }
         function getWH(el, name) {
            var val = name === "width" ? el.offsetWidth : el.offsetHeight,
                which = name === "width" ? ['Left', 'Right'] : ['Top', 'Bottom'];
             
            // display is none
            if(val === 0) {
                return 0;
            }
     
            for(var i = 0, a; a = which[i++];) {
                val -= parseFloat( getStyle(el, "border" + a + "Width") ) || 0;
                val -= parseFloat( getStyle(el, "padding" + a) ) || 0;
            }
         
    //      return val + 'px';
    		return val;
        }



    展开全文
  • Vue中如何获取元素的宽高呢?

    千次阅读 2019-08-14 00:44:03
    使用ref获取元素的宽度:this.$refs.abc.clientWidth 使用ref获取元素的高度:this.$refs.abc.clientHeight (注意:宽高不包括border的宽度)

    使用ref获取元素的宽度:this.$refs.abc.clientWidth      

    使用ref获取元素的高度:this.$refs.abc.clientHeight

    (注意:宽高不包括border的宽度)

    展开全文
  • React中ref获取元素的宽度、高度,React获取元素宽高,宽高,ref获取元素宽高,宽高,获取元素宽高,宽高,React,ref,react中如何获得元素宽高

    1.定义HTMLParagraphElement类型属性。

    pvcDesDom:HTMLParagraphElement
    

    2.componentDidMount中获取高度。

    componentDidMount() {
            setTimeout(function () {
                this.setState({
                    scrollHeight: this.pvcDesDom.scrollHeight
                })
            }.bind(this))
    }
    

    3.元素上追加ref属性。

    <p className={'pvd-item-describe ' + (this.state.pvdDesShow ? '' : 'pvd-item-describe-hide')} ref={dom => { this.pvcDesDom = dom }}>data</p>
    

    4.通过this.state.scrollHeight获取高度。

    补充Dom的宽高和位置

    // 尺寸:
    clientWidth  |  clientHeight     元素的内尺寸(width + padding)如果有滚动条,是可视区域高度
    scrollWidth  |  scrollHeight      元素滚动内容的总高度
    offsetWidth  |  offsetHeight     元素的外尺寸  (width + padding + border)
    // 位置:
    offsetLeft  |  offsetTop     元素相对于已定位父元素(offsetParent)的偏移量
    offsetParent元素是指元素最近的定位(relative,absolute)父元素,可递归上溯,如果没有,返回body元素
    ele.getBoundingClientRect()   返回元素的大小及其相对可视区域的位置
    如:ele.getBoundingClientRect().left   从视口左端到元素左端边框的距离(不包含外边距)
    scrollLeft  |  scrollTop     是指元素滚动条位置,它们是可写的
    

    点赞、关注加收藏,我们一起学前端📚

    展开全文
  • 获取隐藏元素(display:none)物理尺寸 问题及场景 假如我们有这样一个输入框,点击能展开选择。如下图: 在这里输入框和下方展开区域是分离,独立两个控件!初始状态下面可选框是隐藏(ng-show=...

    获取隐藏元素(display:none)的物理尺寸

    问题及场景

    假如我们有这样一个输入框,点击能展开选择。如下图:

    在这里输入框和下方的展开区域是分离的,独立的两个控件!初始状态下面的可选框是隐藏的(ng-show=false)

    展开区域中可折叠组件accordion(对应图中省份,排序字段,短消息部分)的高度是随着数据自适应撑开,点击accordion折叠收缩时有一个高度变化的动画效果!

    在计算accordion的高度时却无法获取数据节点元素的高度,导致accordion的高度为0,无法折叠!

    原因

    在一个隐藏的div元素节点中无法获取它子元素的物理尺寸!即输入框下面的展开区域还是隐藏时,accordion控件无法获取数据DOM节点元素的高度.

    解决方案

    JQuey中height()和width()方法获取隐藏元素的尺寸。但是这只能获取隐藏元素的高度,无法获取内部子元素的高度!!!

    解决方案:JS控制css设置元素的隐藏与显示

    代码思路:显示隐藏元素(去掉元素的隐藏方式,css属性display:none或者某些样式类) ---> 计算目标元素高度 ---> 还原隐藏元素的样式

    存在问题:

    1.元素在切换显示与隐藏时会闪烁 ----> 解决办法:利用css中visibility:hidden不可见属性,visibility:hidden隐藏的元素有物理尺寸。

     如果高度的计算能在极短的时间内完成,此闪烁现象可以忽略不计!

    2.元素显示后会占据物理尺寸可能影响其它元素位置 ----> 解决办法:将这个隐藏的元素移出屏幕或者脱离文档流( position: absolute)。

    示例代码如下:

    调用getSize方法传入被隐藏元素element,以及需要获取尺寸的目标元素就能返回targetEl的尺寸了!!!

    //获取元素的物理尺寸,参数:element隐藏的元素节点;targetEl需要获取尺寸的目标元素
    this.getSize = function(element,targetEl) {
        //增加隐藏,防止element在取消隐藏时闪烁; position: absolute;和display:none看需要是否加上
        var _addCss = { visibility: 'hidden' };
        var _oldCss = {};
        var _width;
        var _height;
        if (this.getStyle(element, "display") != "none") {
            return { width: !!targetEl ? targetEl.offsetWidth  : element.offsetWidth , height: !!targetEl ? targetEl.offsetHeight : element.offsetHeight };
        }
        for (var i in _addCss) {
            _oldCss[i] = this.getStyle(element, i);
        }
        this.setStyle(element, _addCss);
        //这里是通过angularjs的ng-show指令隐藏元素的,去掉ng-hide样式类就可以取消隐藏
        var _isNgHide = element.classList.contains("ng-hide");
        _isNgHide && element.classList.remove("ng-hide");
        _width = !!targetEl ? targetEl.offsetWidth  : element.offsetWidth;
        _height =!!targetEl ? targetEl.offsetHeight : element.offsetHeight;
        //还原之前的样式,class
        this.setStyle(element, _oldCss);
        _isNgHide && element.classList.add("ng-hide");
        return { width: _width, height: _height };
    };
    this.getStyle = function(element, styleName) {
        return element.style[styleName] ? element.style[styleName] : element.currentStyle ? element.currentStyle[styleName] : window.getComputedStyle(element, null)[styleName];
    };
    
    this.setStyle = function(element, obj){
        if (angular.isObject(obj)) {
            for (var property in obj) {
                var cssNameArr = property.split("-");
                for (var i = 1,len=cssNameArr.length; i < len; i++) {
                    cssNameArr[i] = cssNameArr[i].replace(cssNameArr[i].charAt(0), cssNameArr[i].charAt(0).toUpperCase());
                }
                var cssName = cssNameArr.join("");
                element.style[cssName] = obj[property];
            }
        }
        else if (angular.isString(obj)) {
            element.style.cssText = obj;
        }
    };

     

    转载于:https://www.cnblogs.com/weboey/p/6434314.html

    展开全文
  • 在css中visibility:hidden为不可见属性,但使用visibility:hidden隐藏的元素有物理尺寸,因此这里原理就是将display:none的元素转换为isibility:hidden的元素,并计算宽高后改回来; 0x01 弊端 此方法有一个...
  • 方法一:DOM节点.offsetWidth/...作用:获取是内容区域(content) + 内边距(padding) + 边框(border)值,输出一个数字。 <style type="text/css"> div{ width: 100px; height: 100px; ...
  • dom.style.width/height (只适用获取内联元素的宽和高, 不合法值, 取出来是空字符) dom.currentStyle.width/height (获取渲染后的宽高,但是仅IE支持) window.getComputedStyle(dom).width/height (与2原理相似,...
  • JS日常随笔: 使用JS获取元素的宽高

    千次阅读 2017-12-06 16:14:53
    如果我们遇到这么一个需求,要在JS运行时获取到某个指定的元素的宽高,那我们应该如何操作?// 下面我们所有的例子操作都是基于这个节点 var oDomNode = document.queryselector('body') dom.style.width console.log...
  • 如何获取一个dom元素的宽

    千次阅读 2018-03-21 13:39:12
    1.通过domstyle属性获取宽,只能获取内联属性值 dom.style.width/height 2.无论像是class还是内联还是style都会被浏览器渲染,在渲染之后就会通过currentStyle,不过只有IE支持 dom.currentStyle.width/...
  • js进阶 11-6 jquery如何获取和设置元素的宽高(jquery多方法) 一、总结 一句话总结:jquery里面多是方法啊,比如jquery对象的宽高。所以取值是方法,赋值就是方法里面带参数。 1、百度富文本编辑器ueditor如何...
  • 如何使用jquery来获取网页里各种...1 $(document).ready(function(){2 var divWidth = $("#div").width(),//width()返回元素的宽高,不包括padding/border/margin 3 divInnerWidth = $("#div").innerWidth(),//inne...
  • 1、目标使用画布元素,快速绘制一个中小学教学使用工具,效果如下:2、步骤要使用画布实现上述图形效果,需要掌握画布下列API使用方法:· 直接绘制方法· 圆形绘制方法· 文字绘制方法同时,还要掌握在图形...
  • 注意看题了,楼主肯定是设置了display:none,不要答非所问,...下面给一个获取隐藏元素宽高的,代码如下:;( function ( $ ){$.fn.addBack = $.fn.addBack || $.fn.andSelf;$.fn.extend({actual : function ( m...
  • vue如何动态获取浏览器高度和宽度,对于某些小伙伴来说间直接是简单到不能再简单了,为什么要整理这篇文章呢,源于最近项目中有高度、宽度自适应需求,需要适应不同分辨率高度及宽度,在不同分辨率下效果区别...
  • 最近项目中需要获取 dom 元素的尺寸,所以借此对比分析一下 js 所有获取尺寸的方法,以及相关的 dom 定位方式。JS 尺寸、定位都有哪些获取方式呢JS 尺寸获取方法:clientWidth & clientHeightoffsetWidth & ...
  • 这种方式只能取到dom元素内嵌样式的宽,通过外联样式link引入和在style标签中设置的样式这两者都是获取不到node的宽的,即只有这种: <p style="width:100px;height:50px">test</p> 但用...
  • 原生js如何获取宽高

    2020-10-25 21:08:21
    最近项目中需要获取 dom 元素的尺寸,所以借此对比分析一下 js 所有获取尺寸的方法,以及相关的 dom 定位方式。 JS 尺寸、定位都有哪些获取方式呢 JS 尺寸获取方法: clientWidth & clientHeight offsetWidth &...
  • 1.dom.style.width/height(只适用获取内联元素的宽和高) 2.dom.currentStyle.width/height(获取渲染后的宽高,但是仅IE支持) 3.window.getComputedStyle(dom).width/height(与2原理相似,但是兼容性,通用性会更好...

空空如也

空空如也

1 2 3 4 5
收藏数 94
精华内容 37
关键字:

如何获取元素的宽高