精华内容
下载资源
问答
  • jquery获取元素padding

    2020-03-16 11:36:43
    var paddingLeft = $("#contentDiv").css("padding-left"); // 结果:"5px" paddingLeft.replace('px', '')); // 结果:"5" parseInt(paddingLeft.replace('px', '')); //转换为int
    var paddingLeft = $("#contentDiv").css("padding-left"); // 结果:"5px"
    
    paddingLeft.replace('px', '')); // 结果:"5"
    
    parseInt(paddingLeft.replace('px', '')); //转换为int

     

    展开全文
  • 原生js获取 ... //获取元素宽度包含padding值 box.clientHeight; //获取元素高度包含padding值 box.offsetWidth; //获取元素宽度+padding +border box.offsetHeight; //获取元素高度+pad...

    原生js获取

    var box = document.getElementById("box");
    box.clientWidth;	//获取该元素宽度包含padding值
    box.clientHeight;	//获取该元素高度包含padding值
    box.offsetWidth;	//获取该元素宽度+padding +border
    box.offsetHeight;	//获取该元素高度+padding+border
    box.clientLeft;		//获取该元素的左边框
    box.clientTop;		//获取该元素的上边框
    

    jquery获取定位父元素以及距离

     var box = $(".box");		//jquery获取类名为box的元素<div class="box"></div>
     box.width();				//获取box的实际宽度
     box.height();				//获取box的实际高度
     box.innerWidth();			//获取box的实际宽度+padding
     box.innerHeight();			//获取box的实际报读+padding
     box.outerWidth();			//获取box的实际宽度+padding+border
     box.outerHeight();			//获取box的实际高度+padding+border
     box.outerWidth(true);		//获取box的实际宽度+padding+border+margin
     box.outerHeight(true);		//获取box的实际高度+padding+border+margin
    

    原生js获取元素实际宽高

    var box = document.getElementById("box");
    getComputedStyle(box).['width'];	//获取box的宽度
    getComputedStyle(box).['height'];	//获取box的高度
    box.style.width;					//只能获取行内样式宽度
    box.style.height;					//只能获取行内样式高度
    

    原生js获取定位父元素以及距离

    <div id="box">
    			<div id="son"></div>
    		</div>
    		<style type="text/css">
    		*{
    			margin: 0;
    			padding: 0;
    		}
    		#box{
    			width: 200px;
    			height: 200px;
    			background-color: #0000FF;
    			position: relative;
    			border: 10px solid red;
    		}
    		#box #son{
    			width: 100px;
    			height: 100px;
    			background-color: pink;
    			position: absolute;
    			top: 10px;
    			left: 10px;
    			border: 10px solid red;
    		}
    		
    	</style>
    	<script type="text/javascript">
    		var son = document.getElementById("son");
    		son.offsetParent;				//获取定位父元素
    		console.log(son.offsetTop);		//获取子元素距离父元素的定位top值
    		console.log(son.offsetLeft);	//获取子元素距离父元素的定位left值
    	</script>
    	
    	注:此方法有兼容问题,IE会计算边框
    
    展开全文
  • VUE获取元素高度的方法

    万次阅读 多人点赞 2018-09-17 09:55:17
    Vue获取元素高度. // 当前区域 &lt;div ref="elememt"&gt;&lt;/div&gt; // 获取高度值 (内容高+padding+边框) let height= this.$refs.elememt.offsetHeight; //100 // 获取元素...

    Vue获取元素高度.

    // 当前区域
    <div ref="element"></div> 
    

    // 获取高度值 (内容高+padding+边框)

    let height= this.$refs.element.offsetHeight;  //100
    

    // 获取元素样式值 (存在单位)

    let height = window.getComputedStyle(this.$refs.element).height; // 100px
    

    //获取元素内联样式值(非内联样式无法获取)

    let height = this.$refs.element.style.height; // 100px
    
    展开全文
  • jq 获取元素的尺寸

    2019-11-20 19:33:51
    jq 获取元素的尺寸

    jq 获取元素的尺寸

    • 获取元素尺寸
    • jquery-3.4.1 是可以获取隐藏元素的宽高的,下面的方法都可以获取隐藏元素的宽高
    方法作用
    width()获取元素的内容宽度
    height()获取元素的内容高度
    innerWidth()获取元素(内容+padding)宽度
    innerHeight()获取元素(内容+padding)高度
    outerWidth()获取元素(内容+padding+border)宽度
    outerHeight()获取元素(内容+padding+border)高度
    outerWidth(true)获取元素(内容+padding+border+margin)宽度
    outerHeight(true)获取元素(内容+padding+border+margin)高度
    • 其他常用尺寸
    写法作用
    $(window).width()获取浏览器可视区宽度
    $(window).height()获取浏览器可视区高度
    $(document).width()获取页面宽度
    $(document).height()获取页面高度
    $('body').width()获取页面宽度,body默认有8px的margin
    $('body').height()获取页面高度,body默认有8px的margin
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            div {
                width: 100px;
                height: 100px;
                background: Red;
                padding: 10px;
                border: 5px black solid;
                margin: 3px;
                display: none;
            }
        </style>
        <script src="./jquery-3.4.1.js"></script>
    </head>
    
    <body style="height: 3000px;">
        <div></div>
        <script>
            //得到元素的内容宽度、高度 width() height()
            console.log($('div').width()); //100 
            console.log($('div').height()); //100 
    
            //得到元素的内容+padding innerWidth() innerHeight()
            console.log($('div').innerWidth()); //120
            console.log($('div').innerHeight()); //120 
    
            //得到元素的内容+padding+border outerWidth() outerHeight()
            console.log($('div').outerWidth());  //130
            console.log($('div').outerHeight()); //130
    
            //得到元素的内容+padding+border+margin outerWidth(true) outerHeight(true)
            console.log($('div').outerWidth(true));  //136
            console.log($('div').outerHeight(true)); //136
    
            //设置元素宽高
            $('div').width(300);
            $('div').height(300);
            console.log($('div').width()) //300
            $('div').innerWidth(300);
            console.log($('div').width());//280  内容=300-padding
            $('div').outerWidth(300)
            console.log($('div').width());//270 内容=300-padding-border
            $('div').outerWidth(300, true)
            console.log($('div').width()); //264 内容=300-padding-border-margin
    
            //原生js 是获取不到隐藏元素的宽高的
            console.log($('div').get(0).offsetWidth) //0 get将jq获取的元素转成js原生的元素 get参数不写的话,输出undefind
            //因为$('div')返回的对象是个数组,不管有没有值,返回的都是数组,所以需要加0
    
            //jq是可以获取隐藏元素的宽高的
            console.log($('div').width())  //264
    
            //其他尺寸
            //浏览器可视区的宽高 $(window).width() $(window).height
            console.log($(window).width())
            console.log($(window).height())
    
            //页面宽高 $(document).width() $(document).height() $('body').width() $('body').height()
            console.log($(document).width()); //877
            console.log($('body').width()); //861 //左右两边默认 margin 8px
        </script>
    </body>
    </html>
    
    展开全文
  • js原生获取margin padding

    2020-12-14 19:38:18
    var ml = d1.currentStyle || window.getComputedStyle(d1)["margin-left"]
  • 分别为$.width()$.innerWidth()和$.outerWidth()
  • vue获取元素高度的方法

    千次阅读 2020-08-03 15:33:06
    vue获取元素的高度 <div ref="getHeight" class="block"/> .block { width: 100px; height: 100px; background: blueviolet; border: 2px solid pink; padding: 10px; margin: 5px; } 获取高度值...
  • vue 获取元素高度

    千次阅读 2019-08-02 10:14:00
    <div ref="getheight"></div> 2、JavaScript // 获取高度值 (内容高+padding+边框) ...let height= this.$refs.getheight....// 获取元素样式值 (存在单位) let height = window.getComputedStyle...
  • JS获取元素在页面的位置

    万次阅读 2019-01-24 14:59:22
    obj.clientWidth //获取元素的宽度(width+padding) obj.clientHeight //元素的高度 obj.offsetLeft //元素相对于父元素的left obj.offsetTop //元素相对于父元素的top obj.offsetWidth //元素的宽度(width+...
  • 获取元素的大小 offsetWidth/offsetHeight元素的实际大小content+padding+border只读 clientWidth/clientHeight cotent + padding 只读 scrollWidth/scrollHeight 如果子元素没有溢出:同client;子元素溢出: ...
  • flutter中获取元素的大小

    千次阅读 2018-06-05 15:24:37
    本文讲述flutter中获取元素的探索之旅,并总结获取元素大小的方法。 前言 Flutter的布局体系中,带有大小尺寸的元素并不多,比如SizedBox,ConstrainedBox,Padding等,通过精确设置元素大小来获取某个容器的大小...
  • 1.elem.offsetTop:获取元素的上偏移 2.elem.offsetLeft:获取元素的左偏移 (在chrome和ie8+偏移值都是相对body做的偏移) (ie7-是相对父元素偏移) 3.elem.offsetWidth:获取元素边框及边框以内的宽度 4.elem....
  • JS获取元素的offsetTop,offsetLeft等属性obj.clientWidth //获取元素的宽度(width+padding)obj.clientHeight //元素的高度obj.offsetLeft //元素相对于父元素的leftobj.offsetTop //元素相对于父元素的topobj....
  • jQuery获取隐藏元素高度,了解一下   &lt;!DOCTYPE html&gt; &lt;html lang="...简单的jQuery获取隐藏元素高度、jQuery获取元素高度、jQuery获取DIV高度&lt;/title&gt;
  • Jquery获取元素宽高

    2016-10-31 16:54:01
    首先,利用Jquery获取元素的高度。 height()方法用于获得元素高度; innerHeight()方法用于获得包括内边距(padding)的元素高度; outerHeight()方法用于获得包括内边距(padding)和边框(border)的元素高度; ...
  • VUE获取元素的高度

    万次阅读 2019-03-01 16:36:13
    Vue获取元素高度. // 当前区域 &lt;div ref="elememt"&gt;&lt;/div&gt; // 获取高度值 (内容高+padding+边框) let height= this.$refs.elememt.offsetHeight; ...
  • JS中获取元素的尺寸及位置

    千次阅读 2017-05-20 15:49:47
    JS中获取元素的尺寸及位置 1. clientWidth a) 作用:获取元素可视化宽度 b) 注意:clientWidth=width+padding 2. clientHeight a) 作用:获取元素可视化高度 3. offsetWidth a) 作用:获取元素宽度 b...
  • 原生JavaScript获取元素的margin外边距

    千次阅读 2019-11-13 12:07:20
    最近想找一个可以获取元素高度(包括外边距margin)的方法,原生JS的实现方法一直没有找到,不过有一个方法可以获取元素的边距,记录一下: 语法是(获取元素的属性值): getComputedStyle(element[,pseudo]) ...
  • js获取元素位置以及元素页面大小总结: 一:元素位置: js中获取元素位置也就是元素的left以及top位置利用el.offset即可。el.offsetLeft以及el.offsetTop获取的是元素边框外部到目标位置距离; 而我们如果要获得...
  • JavaScript获取元素的定位参考元素和定位值方法1. offsetParent 获取元素的定位参考元素 element.offsetParent 2. offsetLeft 获取元素到定位参考元素的左边距离 element.offsetLeft 3. offsetTop 获取元素的...
  • jquery获取元素位置

    2012-07-24 10:52:15
    jquery获取元素位置 获取页面某一元素的绝对X,Y坐标,可以用offset()方法:(body属性设置margin :0;padding:0;) var X = $("#DivID").offset().top; var Y = $("#DivID").offset().left; 获取相对(父元素)...
  • 一、.width() 为匹配的元素集合中获取第一个元素的当前计算宽度值。给每个匹配的元素设置CSS宽度。 内容宽度 二、.height() ...为匹配的元素集合中获取第一个元素的当前计算高度值,包括padding,但是不包括bord
  • js获取元素的高度

    万次阅读 2019-06-28 22:09:11
    获取元素的高度 style.height 包括元素的滚动条,不包括边框,值为string,带单位px 使用style.height最坑的就是height必须使用行内样式,使用内联式和外嵌式是不行的 height在<style>标签中设置,使用style...
  • 获取元素内容高度

    2019-11-12 11:18:16
    // 获得的是该div本身的高度, (不包含padding,margin,border) $("#div_id").outerHeight(); // 包含该div本身的高度, padding上下的高度, 以及border上下的高度(不包含margin的高度) $("#div_id").outerHeight(true...
  • js获取元素相对于父级元素的高度

    万次阅读 2017-12-20 16:31:02
    js获取元素相对于父级元素的高度 1. offsetLeft 、offsetTop  用于获取子元素相对于父元素的位移(左位移、上位移)  console.log(oNode.offsetLeft); 2. offsetWidth、offsetHeight  用于获取元素的可见...
  • 作用:获取元素可视化宽度注意:clientWidth=width+padding 2、clientHeight 作用:与clientWidth类似 3、offsetWidth 作用:获取元素宽度注意:offsetWidth=Width+padding+border 4、...
  • 今天呢,仍然是简单的介绍几个方法,获取元素对象的尺寸以及元素的位置。在JavaScript中,我们通过offset/client获取元素在页面中的位置和尺寸,同样在jQuery中,我们也需要知道如何去获取元素的大小以及元素的偏移...
  • 获取元素宽/高和距离定位父级的距离 获取元素宽高 offsetWidth/offsetHeight获取元素的宽度和高度(包含边框和内边距) clientLeft/clientTop取元素左/上边框宽度 clientWidth/clientHeight获取元素宽度(不包含...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 80,537
精华内容 32,214
关键字:

获取元素padding