获取元素宽高

曾经终败给现在 2021-10-23 14:56 380阅读 0赞

获取元素宽高值

1.内联样式. element.style读取的只是元素**内联样式,**即写在元素的 style 属性上的样式,支持读写.

var elebox = document.getElementById('eleId');
    var h = elebox.style.height;

外联样式、嵌套样式无法通过上述方法直接获取.

2.getComputedStyle (Chrome/ff)和currentStyle(ie)

var style = window.getComputedStyle ? window.getComputedStyle(elebox ,null) : null || elebox.currentStyle;
    var h = style.height;

getComputedStyle 读取的样式是最终样式，包括了**内联样式**、**嵌入样式**和**外部样式**。只读不能写.

参数2不需要伪元素信息时,填null.

**相同点**

以上两种方法返回的都是 CSSStyleDeclaration 对象,返回的对象的键名是 **css** 的驼峰式写法.

3.cssRules(Chrome/ff)或rules(ie)

var sheet = document.styleSheets[0];
     var rule = (sheet.cssRules || sheet.rules)[0];
     var h = rule.style.height;

最新的chrome都可以使用.

*document.styleSheets *的返回对象是一个 styleSheetList ,是 styleSheet 对象的有序集合.

//获取元素的任意 CSS 属性值。
    function getStyle(element, attr) {
       if(element.currentStyle) {
            return element.currentStyle[attr];
       } else {
            return getComputedStyle(element, false)[attr];
       }
    }

4.clientHeight、scrollHeight、offsetHeight

通过上述三个属性获取数值,但是受其它参数影响.

发表评论取消回复

表情：

评论列表（有 0 条评论，380人围观）

还没有评论，来说两句吧...

相关阅读

相关 uni-app结合Vue（动态获取dom元素宽、高）

html代码 <template> <view class="home_page"> <view class="body" ref="bo

忘是亡心i/ 2023年01月01日 03:59/ 0 赞/ 354 阅读

相关 Flutter页面绘制完成获取元素宽高

final GlobalKey _containerKey = GlobalKey(); @override void ini

我就是我/ 2022年12月24日 03:53/ 0 赞/ 257 阅读

相关 android获取屏幕宽高与获取控件宽高

获取屏幕宽高 \[java\] [view plain][] [copy][view plain] 1. // 获取屏幕宽高（方法1） 2. int screen

柔光的暖阳◎/ 2022年08月05日 02:43/ 0 赞/ 226 阅读

相关 jQuery 获取元素尺寸（宽和高）

在前面几篇文章中，介绍的都是和DOM相关的jQuery方法，本篇文章依旧继续讲和DOM相关的方法。用jQuery获取一相元素的大小并不难，如下： $(window

╰+攻爆jí腚メ/ 2022年05月14日 13:23/ 0 赞/ 367 阅读

相关小程序获取元素宽高

小程序本身是不支持DOM和BOM操作的，但有时候还是需要获取一下宽高的，查了一下，发现真的可以获取到。感谢大佬3秒钟！小程序的API有个WXML，这次用到wx.create

柔情只为你懂/ 2022年05月12日 10:48/ 0 赞/ 362 阅读

相关获取元素宽高

获取元素宽高值 1.内联样式. element.style读取的只是元素内联样式,即写在元素的 style 属性上的样式,支持读写. var elebox = do

曾经终败给现在/ 2021年10月23日 14:56/ 0 赞/ 381 阅读

相关 js获取宽高

引用自[https://www.cnblogs.com/chengzp/p/cssbox.html][https_www.cnblogs.com_chengzp_p_cssb

短命女/ 2021年10月23日 14:30/ 0 赞/ 376 阅读

相关 Javascript原生获取dom元素宽、高

获取网页窗体方法网页可见区域宽： document.body.clientWidth 网页可见区域高： document.body.clientHe

淩亂°似流年/ 2021年09月17日 07:54/ 0 赞/ 497 阅读

相关浏览器获取宽高

`screen.availHeight` is the height the browser's window can have if it is maximized.

待我称王封你为后i/ 2021年09月10日 09:44/ 0 赞/ 448 阅读

相关 jq 获取元素宽高的方法补充

1、$对象.width/height("npx/n%"); 等同于$.css('width','npx'); 既可设置，也可获取,无单位，内容区域 2、.c

本是古典何须时尚/ 2021年07月24日 16:47/ 0 赞/ 401 阅读