通过 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. C# WPF打包部署时添加注册表信息实现开机启动

    使用VS自带的打包模块可以很方便的对项目进行打包部署,同时我们也可以在安装部署时操作注册表实现开机启动软件.具体实现如下: 创建安装部署这部分就不用说了,添加安装部署项目后,鼠标右键安装项目-> ...

  2. WPF进度条

    ProgressBar控件与传统WinForm使用方法完全一样,我们只需关注: Minimum——最小值,默认为0: Maximum——最大值,默认为100. Value——当前值.   关键是它的控 ...

  3. git 找回 git reset --hard HEAD 后的代码

    下面方法只针对当你本地代码做了 git add 或则 git commit 后又手贱的重置本地代码到上一个版本,导致本地代码丢失的情况. 如果你没有 git add 命令,而直接 git reset ...

  4. [日常] MySQL内存不足启动失败的解决方法

    1.启动mysql时,一直不成功,查看错误日志 /var/log/mysql/error.log 2.主要的错误信息有如下几条: [ERROR] InnoDB: mmap(136151040 byte ...

  5. java利器------反射机制

    java反射的概念:java的反射机制是指在运行状态下,对于一个类来说,可以得到这个类的所有方法和属性.对于一个对象来说,可以调用这个对象的人和方法和属性. 反射机制首先会拿到该类的字节码文件(Cla ...

  6. Hive可视化工具

    目前市面上的Hive可视化客户端工具,大都是C/S模式的,安装使用都不是太方便,目前有一款基于WEB的可视化工具TreeSoft,通过浏览器就可以访问使用了,并且可以同时管理.维护.监控MySQL,O ...

  7. 使用DOM创建xml文件

    使用DOM创建xml文件 创建xml的代码如下: public class CreateXML { public static void main(String[] args) { DocumentB ...

  8. Docker for Windows(一)下载与安装

    一.下载Docker for Windows 下载地址:Docker for Windows 下载完是一个安装程序,双击运行即可.注:如果您的系统不符合运行Docker for Windows的要求, ...

  9. CSS属性之border

    css的border属性相信大家都不陌生了,就是给元素加个边框嘛,在不同的盒模型下,会给元素的宽高带来怎样的影响,相信大家也都很熟悉了,这里就不再赘述,只说说大家平时没有怎么留意的东西. 0.bord ...

  10. RESULT_OK,RESULT_CANCELED,RESULT_FIRST_USER

    RESULT_OK是执行结果,有RESULT_OK,RESULT_CANCELED,RESULT_FIRST_USER 在调用系统app时返回时RESULT_CANCELED如字面意思代表取消,RES ...