JavaScript的DOM操作获取元素的大小
通过 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操作获取元素的大小的更多相关文章
- JavaScript的DOM操作获取元素实际大小
clientWidth 和 clientHeight 这组属性可以获取元素可视区的大小,可以得到元素内容及内边距所占据的空间大小. 返回了元素大小,但没有单位,默认单位是 px,如果你强行设置了单位, ...
- JavaScript的DOM操作获取元素周边大小
一.clientLeft 和 clientTop 这组属性可以获取元素设置了左边框和上边框的大小,目前只提供了 Left 和 Top 这组,并没有提供 Right 和 Bottom. <scri ...
- javascript的DOM操作获取元素
一.document.getElementById() 根据Id获取元素节点 <div id="div1"> <p id="p1"> ...
- dom操作------获取元素的若干方法
// 1,getElementById:返回元素节点document.getElementById(); // 2,getElementsByClassName:返回HTMLCollection对象( ...
- 第一百一十六节，JavaScript，DOM操作样式
JavaScript,DOM操作样式 一．操作样式 CSS作为(X)HTML的辅助,可以增强页面的显示效果.但不是每个浏览器都能支持最新的CSS能力.CSS的能力和DOM级别密切相关,所以我们有必要检 ...
- Python之路day13 web 前端（JavaScript，DOM操作）
参考链接:http://www.cnblogs.com/wupeiqi/articles/5433893.html day13 1. CSS示例 2. JavaScript 3. DOM操作 上节内容 ...
- 第一百一十五节，JavaScript，DOM操作表格
JavaScript,DOM操作表格 学习要点: 1.操作表格 DOM在操作生成HTML上,还是比较简明的.不过,由于浏览器总是存在兼容和陷阱,导致最终的操作就不是那么简单方便了.本章主要了解一下DO ...
- 网站开发综合技术 三 JavaScript的DOM操作
第3部分 JavaScript的DOM操作 1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Windows对象操作 ...
- Javascript的DOM操作 - 你真的了解吗?
摘要 想稍微系统的说说对于DOM的操作,把Javascript和jQuery常用操作DOM的内容归纳成思维导图方便阅读,同时加入性能上的一些问题. 前言 在前端开发的过程中,javascript极为重 ...
随机推荐
- jquery判断日期是不是为空，是否大于前面的日期
jquery判断日期是否为空,是否大于前面的日期,代码如下:方法一function onemonthtypeChange(){var startDate = $("#startDate&qu ...
- js小练习-移除数组中的元素
移除数组 arr 中的所有值与 item 相等的元素,直接在给定的 arr 数组上进行操作,并将结果返回 代码: <!DOCTYPE HTML><html> <he ...
- MVC 中文显示乱码问题
在学习中遇到中文乱码的问题,在网上搜了一下大神的解决方法,总结了一点知识点. 项目中的代码 //GET: /HelloWorld/Welcome/ public string Welcome(stri ...
- Oracle中的锁
Oracle中的锁 锁是一种机制,多个事务同时访问一个数据库对象时,该机制可以实现对并发的控制 按照用户系统锁可以分为自动锁和显示锁. 自动锁(系统上锁):DML锁.DDL锁.systemlocks锁 ...
- Django基础二之URL路由系统
一 URL配置 Django 1.11版本 URLConf官方文档 URL配置(URLconf)就像Django 所支撑网站的目录.它的本质是URL与要为该URL调用的视图函数之间的映射表.你就是以这 ...
- JavaScript之DOM操作（一）
这篇文章写于2017-3-19,所有例子基于Chrome 56.0.X.如果时间太久,请自行查阅MDN等获取最新规范内容. 1.节点类型 从MDN上获取的最新情况 一共12种节点类型,分别由12个数值 ...
- jQuery轮播图（手动点击轮播）
下面来看看最终做的手动点击轮播效果: 一.原理说明 (1)首先是轮播图的架构,我采用了一个最外边的大div包住两个小div,一个小div里面放四张图片,另一个小div里面放四个数字按钮 (2)对最外边 ...
- windows Ctrl + Alt + 方向键 取消屏幕反转
1.在桌面右击 2.再次右击桌面 3.单击选项和支持 4.点击禁用和应用
- 短时傅里叶变换(Short Time Fourier Transform)原理及 Python 实现
原理 短时傅里叶变换(Short Time Fourier Transform, STFT) 是一个用于语音信号处理的通用工具.它定义了一个非常有用的时间和频率分布类, 其指定了任意信号随时间和频率变 ...
- 零基础图文傻瓜教程接入Facebook的sdk
零基础图文傻瓜教程接入Facebook的sdk 本人视频教程系类 iOS中CALayer的使用 0. 先解决你的 VPN FQ上外网问题,亲,解决这一步才能进行后续操作^_^. 1. 点击右侧链接 ...