通过 style 内联获取元素的大小

需要注意的是style 获取只能获取到行内 style 属性的 CSS 样式中的宽和高，如果有获取；如果没有则返回空。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<script type="text/javascript">

    window.onload = function(){

        var box = document.getElementById('box'); //获取元素

        alert(box.style.width); //200px、 没有设置的话为空

        alert(box.style.height); //200px、没有设置的话为空

    }

</script>

</head>

<body>

    <div id="box" style="width:200px; height:200px; background-color: red;">测试Div</div>

</body>

</html>

通过计算获取元素的大小

通过计算获取元素的大小，无关你是否是行内、内联或者链接，它经过计算后得到的结果返回出来。
如果本身设置大小，它会返回元素的大小，如果本身没有设置，会返回默认的大小，IE6,7,8 浏览器返回 auto。

<script type="text/javascript">

    window.onload = function(){

        var style = window.getComputedStyle ? window.getComputedStyle(box, null) : null || box.currentStyle;

        alert(style.width);

        alert(style.height);

    }

</script>

</head>

<body>

    <div id="box" class="aaa">测试Div</div>

</body>

通过 CSSStyleSheet 对象中的 cssRules(或 rules)属性获取元素大小

cssRules(或 rules)只能获取到内联和链接样式的宽和高，不能获取到行内和计算后的样式。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<script type="text/javascript">

    window.onload = function(){

        var sheet = document.styleSheets[0]; //获取 link 或 style

        var rule = (sheet.cssRules || sheet.rules)[0]; //获取第一条规则

        alert(rule.style.width); //200px、空

        alert(rule.style.height); //200px、空

    }

</script>

<style type="text/css">

    .aaa{

        background-color: red;

        width:200px;

        height:200px;

    }

</style>

</head>

<body>

    <div id="box" class="aaa">测试Div</div>

</body>

</html>

JavaScript的DOM操作获取元素的大小的更多相关文章

  1. JavaScript的DOM操作获取元素实际大小

    clientWidth 和 clientHeight 这组属性可以获取元素可视区的大小,可以得到元素内容及内边距所占据的空间大小. 返回了元素大小,但没有单位,默认单位是 px,如果你强行设置了单位, ...

  2. JavaScript的DOM操作获取元素周边大小

    一.clientLeft 和 clientTop 这组属性可以获取元素设置了左边框和上边框的大小,目前只提供了 Left 和 Top 这组,并没有提供 Right 和 Bottom. <scri ...

  3. javascript的DOM操作获取元素

    一.document.getElementById()    根据Id获取元素节点 <div id="div1"> <p id="p1"> ...

  4. dom操作------获取元素的若干方法

    // 1,getElementById:返回元素节点document.getElementById(); // 2,getElementsByClassName:返回HTMLCollection对象( ...

  5. 第一百一十六节，JavaScript，DOM操作样式

    JavaScript,DOM操作样式 一．操作样式 CSS作为(X)HTML的辅助,可以增强页面的显示效果.但不是每个浏览器都能支持最新的CSS能力.CSS的能力和DOM级别密切相关,所以我们有必要检 ...

  6. Python之路day13 web 前端（JavaScript，DOM操作）

    参考链接:http://www.cnblogs.com/wupeiqi/articles/5433893.html day13 1. CSS示例 2. JavaScript 3. DOM操作 上节内容 ...

  7. 第一百一十五节，JavaScript，DOM操作表格

    JavaScript,DOM操作表格 学习要点: 1.操作表格 DOM在操作生成HTML上,还是比较简明的.不过,由于浏览器总是存在兼容和陷阱,导致最终的操作就不是那么简单方便了.本章主要了解一下DO ...

  8. 网站开发综合技术 三 JavaScript的DOM操作

    第3部分 JavaScript的DOM操作 1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Windows对象操作 ...

  9. Javascript的DOM操作 - 你真的了解吗?

    摘要 想稍微系统的说说对于DOM的操作,把Javascript和jQuery常用操作DOM的内容归纳成思维导图方便阅读,同时加入性能上的一些问题. 前言 在前端开发的过程中,javascript极为重 ...

随机推荐

  1. SqlServer知识点

    在公司天天写Sql写,存储过程,但是公司工具模板把创建的语句都写好了,只负责写里面的逻辑,久而久之,创建语句都不会写了.还有一些知识点都很模糊,平常使用的时候都不清楚,稀里糊涂的就在用.在这里整理一下 ...

  2. Centos系统下卸载、安装MySQL及用户的创建、授权和使用（详细。。。。）

    由于经常使用linux系统,并且大数据环境搭建中经常会使用到mysql,不像windows系统下的安装,今天有点空写一篇,下面我给大家演示一遍. 主要有三部分内容: 1.MySQL的卸载 2.MySQ ...

  3. java并发编程的艺术（二）---重排序与volatile、final关键字

    本文来源于翁舒航的博客,点击即可跳转原文观看!!!(被转载或者拷贝走的内容可能缺失图片.视频等原文的内容) 若网站将链接屏蔽,可直接拷贝原文链接到地址栏跳转观看,原文链接:https://www.cn ...

  4. Android DiskLruCache完全解析，硬盘缓存的最佳方案

    Android DiskLruCache完全解析,硬盘缓存的最佳方案 概述   记得在很早之前,我有写过一篇文章Android高效加载大图.多图解决方案,有效避免程序OOM,这篇文章是翻译自Andro ...

  5. 实习小结（四）--- MyBatis Generator使用

    第一次听闻MyBatis Generator插件很是惊讶,已经有这么便捷方式的工具通过数据库表来自动生成实体类,映射文件,接口以及帮助类,而且可以通过自己写方法来增加中文注释,遂来学习一波.首先先建一 ...

  6. 【代码笔记】iOS-iOS的目录

    一.iOS中的沙盒机制 · iOS应用程序只能对自己创建的文件系统读取文件,这个独立.封闭.安全的空间,叫做沙盒.它一般存放着程序包文件(可执行文件).图片.音频.视频.plist文件.sqlite数 ...

  7. hibernate、java、数据库对应类型

    引自 https://my.oschina.net/heau/blog/498874 java.数据库对应类型 类型名称 显示长度 数据库类型 JAVA类型 JDBC类型索引(int) 描述     ...

  8. axTOCControl右键

    private void axTOCControl1_OnMouseDown(object sender, ITOCControlEvents_OnMouseDownEvent e) { if (e. ...

  9. CentOS7系列--10.1CentOS7中的GNOME桌面环境

    CentOS7中的桌面环境 1. 安装GNOME桌面环境 1.1. 列出所有安装套件 [root@appclient ~]# yum groups list Loaded plugins: faste ...

  10. maven一键部署linux的tomcat（wagon-maven-plugin）

    Maven是一个项目管理工具,它包含了一个项目对象模型 (Project Object Model),一组标准集合,一个项目生命周期(Project Lifecycle),一个依赖管理系统(Depen ...