一个JavaScript获取元素当前高度的实例
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>每天一个JavaScript实例-获取元素当前高度</title> <style> #date{width:90%;height:25%;padding:10px;background: red;} </style> <script> window.onload = function(){ var height = getHeight(); console.log(height); } function getHeight(){ var height = 0; var div = document.getElementById("date").getBoundingClientRect(); if(div.height){ height = div.height; }else{ height = div.bottom - div.top; } return height; } </script> </head> <body> <div style="width:1000px;height:800px;"> <div id = "date"> </div> </div> </body> </html>
相关推荐
-
javascript获取元素CSS样式代码示例
使用css控制页面有4种方式,分别为行内样式(内联样式).内嵌式.链接式.导入式. 行内样式(内联样式)即写在html标签中的style属性中,如<div style="width:100px;height:100px;"></div> 内嵌样式即写在style标签中,例如<style type="text/css">div{width:100px; height:100px}</style> 链接式即为用link标签
-
js 获取元素下面所有li的两种方法
js 获取元素下面所有的li 复制代码 代码如下: var content=document.getElementById("content"); var items=content.getElementsByTagName("ul"); var itemss=items[2].getElementsByTagName("li"); 或 复制代码 代码如下: var div=document.getElementById('a'); var ul
-
JavaScript中获取元素索引的函数
这是我在写结构/表现/行为完全分离的选项卡(jQ版和原生JS版)一文时发现的问题. 今天一个朋友也问到我这个问题, 这个函数的确很实用. 和大家分享一下我的实现方法. 代码: 复制代码 代码如下: function index(current, obj){ for (var i = 0; i < obj.length; i++) { if (obj[i] == current) { return i; } } } 原理: 通过一个for循环遍历找出当前集合中与当前元素相等的元素,那么该元素的下标
-
js正确获取元素样式详解
在说js获取元素样式之前,简单地谈一下样式 样式分三种 外部样式 External Style Sheet 以CSS为扩展名的文件(又称为"超文本样式表"文件),它的作用范围可以是多张网页,或整个网站,甚至不同的网站.与网页链接后,才能应用. 嵌入式样式 internal Style Sheet 包含在网页内部的样式设置,它的作用范围仅限于嵌入的网页. 内联式样式 inline Style 在HTML文档中,内联式样式表的格式化信息直接插入所应用的网页元素的HTML标签中,作为其HTM
-
JavaScript获取元素尺寸和大小操作总结
一.获取元素的行内样式 复制代码 代码如下: var obj = document.getElementById("test"); alert(obj.height + "\n" + obj.width); // 200px 200px typeof=string只是将style属性中的值显示出来 二.获取计算后的样式 复制代码 代码如下: var obj = document.getElementById("test"); var style
-
JavaScript中常见获取元素的方法汇总
常见的获取元素的方法有3种,分别是通过元素ID.通过标签名字和通过类名字来获取. getElementById DOM提供了一个名为getElementById的方法,这个方法将返回一个与之对应id属性的节点对象.使用的时候请注意区分大小写. 它是document对象特有的函数,只能通过其来调用该方法.其使用的方法如下: 复制代码 代码如下: document.getElementById('demo') //demo是元素对应的ID 该方法兼容主流浏览器,甚至包括IE6+,可以大胆使用. ge
-
用js获取元素属性的代码
获取元素属性 // [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
-
js querySelector和getElementById通过id获取元素的区别
这是sina同事xiaoniu发现的,如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> </head> <body> <div id="02E503E2A1C011CFC85B7B701A0677EC0900000000000001"></div> <script> var str = '02E5
-
js中利用tagname和id获取元素的方法
本文分享了js中利用tagname和id获取元素的3种方法,供大家参考,具体内容如下 方法一:整体法,先获取所有的元素,再通过ai+-b的方法来算出需要的元素 方法二:数组法,在全局环境下建立空数组,遇到需要循环的结构时,在循环中获取元素,并放入数组 方法三:函数法,遇到相同的几组元素时,只操作一组元素,并用函数传参来实现所有的效果 具体代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta cha
-
JS简单实现获取元素的封装操作示例
本文实例讲述了JS简单实现获取元素的封装操作.分享给大家供大家参考,具体如下: JS封装获取元素 js的获取元素: ID:document.getElementById(); class:document.getElementsByName()[]; Tag:document.getElementsByTagName()[] 现在我们要简单的封装这个 1. 函数写法: function $(id){ return document.getElementById(); } 其他类同 使用方法: $
-
js 获取元素在页面上的偏移量的方法汇总
使用js制作效果时,我们常常要获取某个元素在页面上的偏移量(例如tip提示框功能).而获取偏移量可以直接获取相对于document的偏移量,也可以获取相对与视口的偏移量(viewpoint)加上页面滚动量(scroll)获得. 1.获取相对与document的偏移量 function getOffsetSum(ele){ var top= 0,left=0; while(ele){ top+=ele.offsetTop; left+=ele.offsetLeft; ele=ele.offsetP
-
js 获取元素所有兄弟节点的实现方法
比如一个ul里面有10个li,而第3个li上有特殊的样式(比如颜色为红色,其他为黑色).我想把其他所有li--不包括红的li--的颜色也设为红色,此时,就需要获得红li的所有兄弟节点. 兄弟,就是和你平辈的,既不是上一级也不是下一级,而且可能有比你大的(兄),也可能比你小(弟).兄弟节点同理,下面是一个常规的获取兄弟节点的办法. 代码如下 function siblings(elm) { var a = []; var p = elm.parentNode.children; for(var i
随机推荐
- C#中Socket与Unity相结合示例代码
- JavaScript中的Screen屏幕对象
- Flex3 DataGrid拖拽到ClumnChart动态显示图表实现代码
- bat文件加密 bat解密脚本(让bat乱码现形)
- python分割和拼接字符串
- asp.net 数组中字符串替换的几种方式
- JavaScript原生对象之String对象的属性和方法详解
- asp.Net 中获取一周第一天,一月第一天等实现代码
- C#之IP地址和整数互转的小例子
- canvas绘制多边形
- SQL 复合查询条件(AND,OR,NOT)对NULL值的处理方法
- 简介JavaScript中getUTCMonth()方法的使用
- Android canvas drawBitmap方法详解及实例
- Linux 中的文件复制cp命令和scp命令详解
- android WebView组件使用总结
- 解决谷歌搜索技术文章时打不开网页问题的python脚本
- apache下支持asp.net的实现方法
- java编程求二叉树最大路径问题代码分析
- YII分模块加载路由的实现方法
- python logging模块的使用总结