一个JavaScript获取元素当前高度的实例_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经典实例、javascript项目实例、javascript实例、javascript实例精通、javascript实例教程,以便于您获取更多的相关知识。

时间: 2024-08-08 02:04:41

一个JavaScript获取元素当前高度的实例_javascript技巧的相关文章

一个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:10

javascript删除元素节点removeChild()用法实例_javascript技巧

本文实例讲述了javascript删除元素节点removeChild()用法.分享给大家供大家参考.具体分析如下: 操作DOM节点的方法:removeChild(),移除子节点,那么可以变通一下来实现移除指定的节点,我们可以先去找到要删除节点的父节点,然后在父节点中运用removeChild来移除我们想移除的节点. function removeElement(_element){ var _parentElement = _element.parentNode; if(_parentEleme

javascript通过className来获取元素的简单示例代码_javascript技巧

示例如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv=

模拟javascript中的sort排序(简单实例)_javascript技巧

一.javascript中sort对数据进行排序的原理 sort() 方法对数组的元素做原地的排序,并返回这个数组. sort 可能不是稳定的.默认按照字符串的Unicode码位点排序; 语法:arr.sort([compareFunction]) 参数 compareFunction 可选.用来指定按某种顺序进行排列的函数.如果省略,元素按照转换为的字符串的诸个字符的Unicode位点进行排序. 如果 compareFunction(a, b) 小于 0 ,那么 a 会被排列到 b 之前: 如

JavaScript获取当前cpu使用率的方法_javascript技巧

本文实例讲述了JavaScript获取当前cpu使用率的方法.分享给大家供大家参考,具体如下: 想获取当前系统cpu的使用率,如果允许使用hta,可以使用以下的代码获取当前cpu的使用率(较为精确) setInterval(function() { var locator=new ActiveXObject ("WbemScripting.SWbemLocator"); var service=locator.ConnectServer("."); var cpu=

javascript实现抽奖程序的简单实例_javascript技巧

昨天开年会的时候看到一个段子说唯品会年会抽奖,结果大奖都被写抽奖程序的部门得了,CTO现场review代码. 简单想了一下抽奖程序的实现,花了十几分钟写了一下,主要用到的知识有数组添加删除,以及ES5 数组新增的indexOf,filter方法, 为了刷新页面后仍能保存已中奖记录,用了localStorage存盘. 刚开始是用随机数直接取编号,发现要剔除已中奖的人很麻烦,如果重复要递归调用,如果中奖的人太多到最后随机数取到已中奖的人概率太大,所以换用两个数组实现,一个记录已中奖的号码,一个记录未

JS获取checkbox的个数简单实例_javascript技巧

JS获取多选框checkbox被选中的个数. var checkbox = document.getElementsByName("likes[]"); //此处通过此种方式才能获得多选框为数组. //like为name = "like[]" , 获得时必须加上[] var checked_counts = 0; for(var i=0;i<checkbox.length;i++){ if(checkbox[i].checked){ //被选中的checkbo

基于JavaScript获取鼠标位置的各种方法_javascript技巧

在一些DOM操作中我们经常会跟元素的位置打交道,鼠标交互式一个经常用到的方面,令人失望的是不同的浏览器下会有不同的结果甚至是有的浏览器下没结果,这篇文章就上鼠标点击位置坐标获取做一些简单的总结,没特殊声明代码在IE8,FireFox,Chrome下进行测试兼容 鼠标点击位置坐标 相对于屏幕 如果是涉及到鼠标点击确定位置相对比较简单,获取到鼠标点击事件后,事件screenX,screenY获取的是点击位置相对于屏幕的左边距与上边距,不考虑iframe因素,不同浏览器下表现的还算一致. functi

如何判断Javascript对象是否存在的简单实例_javascript技巧

Javascript语言的设计不够严谨,很多地方一不小心就会出错. 举例来说,请考虑以下情况. 现在,我们要判断一个全局对象myObj是否存在,如果不存在,就对它进行声明.用自然语言描述的算法如下: if (myObj不存在){ 声明myObj; } 你可能会觉得,写出这段代码很容易.但是实际上,它涉及的语法问题,远比我们想象的复杂.Juriy Zaytsev指出,判断一个Javascript对象是否存在,有超过50种写法.只有对Javascript语言的实现细节非常清楚,才可能分得清它们的区别