html中js隐藏div的高度,js如何获取div(ul li)元素的宽度和高度(包括width/height和CSS的宽度和高度)...
某些时候需要知道元素div(或 ul li)的宽度或高度,大多情况下可以用js取元素div的width或height属性获得,但有时候这个方法不一定奏效,把div的宽度或高度定义在CSS样式中,这个方法就取不到,这种情况应该如何取?
javascript提供了从CSS中获取元素宽度和高度的方法,由于获取的对象比较复杂,所以单用一个方法不能完成,需要用几个方法才获取到,具体看下面的实例。
一、js直接获取div(ul li)元素的宽度和高度
html代码:
CSS代码:
.div{ margin:80px 0px; position:relative; border:1px solid #787878; width:420px; height:32px; line-height:33px;}
javascript代码:
function getDivWidth(obj) {
var div = document.getElementById(obj);
return div.style.width;
}
function getDivHeight(obj) {
var div = document.getElementById(obj);
return div.style.height;
}
1、获取div的宽度(长度)
document.write(getDivWidth("divId"));
输出结果:420
2、获取div的高度
document.write(getDivHeight("divId"));
输出结果:35
输出的正是 div 的 style 属性中定义的宽度和高度,而不是CSS中定义的宽度和高度。如果把 div 的 style 属性去掉,将输出空白,也就是获取不到 CSS 中定义的宽度和高度。
二、js获取CSS样式中定义的div(ul li)元素的宽度和高度
html代码:
CSS代码:
.div{ margin:80px 0px; position:relative; border:1px solid #787878; width:420px; height:32px; line-height:33px;}
javascript代码:
function getCssStyle(obj, propertyName) {
if (arguments.length != 2) { return false; }
element = document.getElementById(obj);
var value = element.style[replaceCss(propertyName)];
if (!value) {
if (document.defaultView && document.defaultView.getComputedStyle) {
var css = document.defaultView.getComputedStyle(element, null);
value = css ? css.getPropertyValue(propertyName) : null;
}
else if (element.currentStyle) {
value = element.currentStyle[replaceCss(propertyName)];
}
}
return value == 'auto' ? '' : value;
}
function replaceCss(s) { return s.replace(/-(\w)/g, function (strMatch,t) { return t.toUpperCase(); }); }
document.write(getCssStyle("divId","width"));
输出结果:420px
输出的 420px 正是CSS中定义的 div 的宽度,有一点需要注意,如果 div 中用了 style 属性又定了宽度,则会输出 style 中的宽度,因为它的优先级高于CSS文件。
以上两个获取元素宽度或高度的方法并没有定死获取某一个元素的宽度或高度,所以要获取 ul li 的宽度或高度,把它们的id作为参数传给 js 方法即可。
html中js隐藏div的高度,js如何获取div(ul li)元素的宽度和高度(包括width/height和CSS的宽度和高度)...相关推荐
- 获取jquery的html内容高度,jquery怎么获取div的高度
jquery获取div高度的方法:首先使用div标签创建一行文字,并使用css设置其高度:然后通过[$]符号获得div对象,使用[css()]方法获得height属性值,即div的高度值. 该方法适用 ...
- js第8章事件案例:获取触发事件的元素,阻止事件冒泡和默认行为的实现、缓动的小球、图片放大特效、按Enter键切换
目录 1.获取触发事件的元素,阻止事件冒泡和默认行为的实现. (1)获取触发事件的元素 (2)阻止事件冒泡 (3)阻止事件默认行为 2.缓动的小球,实现的原理是通过定时器连续地修改当前DOM元素的某个 ...
- Div内有ul li元素,Div设置高度100%,谷歌IE下li过多会显示滚动条,而火狐下就会滚动条就不起作用,li会撑大Div...
产品上也许是用了过多iframe问题,自己做了demo没有这种情况 解决办法: 设置Div的display样式为-moz-inline-grid -moz-代表火狐私有属性,使用自己的div样式就可以 ...
- html+li标签+高度,有时在使用Jquery插入LI元素时,JavaScript不会调整UL元素的高度
要真正地回答您问的问题,如果您只想在所有图像加载完成时调用resize(),那么您需要为这些图像安装onload处理程序,并且当您记录最后一个图像的加载时,您可以调用resize()函数.你可以这样做 ...
- Redis 中的 集合(Set) SCARD:获取集合包含的元素数量
5.5 SCARD:获取集合包含的元素数量 通过使用SCARD命令,用户可以获取给定集合的大小,即集合包含的 元素数量: 以下代码展示了如何使用SCARD命令去获取databases集合.fruits ...
- js获取div的宽度和高度的坑
元素尺寸属性 说明 clientWidth 获取元素可视部分的宽度,即 CSS 的 width 和 padding 属性值之和,元素边框和滚动条不包括在内,也不包含任何可能的滚动区域 clientHe ...
- php表格js用时间查询,使用JS将数据显示到表格中(时间:2019.01.17)
实例 html> 使用JS将数据显示到表格中 table { width: 500px; } table, th, td { border: 1px solid #DDDDDD; /*colla ...
- css+隐藏+左侧菜单栏,放在网页左侧的DIV+CSS隐藏菜单代码
放在网页左侧的DIV+CSS隐藏菜单代码- www.webdm.cn body { background: #fff; font-family: "Lucida Grande", ...
- html怎么实现单个li效果,基于DIV+ul+li实现的表格(多示例)
普通的显示数据的时候,ul就是项目列表,li就是列表项.可以用来显示数据.如果用于DIV+CSS布局的话,ul+li可以替换表格的作用,具体的设置,如果宽度高度.行间距.背景边框等需要配合CSS一起设 ...
最新文章
- wps插件实用插件_6款实用PS插件合集,好用的PS插件都在这里!
- SQL Server-聚焦sp_executesql执行动态SQL查询性能真的比exec好?
- leetcode算法第三题
- android stadio 打开别人的工程 一直在编译中
- VTK:颜色字形用法实战
- indexzero/http-server-2-使用
- java jframe全屏_Java-将JFrame设置为全屏时,屏幕变黑
- [工具]微软的学习平台Microsoft Learn很好用,推荐一下
- 2016级算法第六次上机-D.AlvinZH的学霸养成记V
- 关于把类放到结构体中
- 西南大学C语言2019年12月,西南大学[1056]计算机基础2020年12月机考参考答案
- 音乐剪辑_android版,全能视频音乐剪辑大师
- QCA9886降低功耗指令
- 服务器怎么ghost备份系统,GHOST备份系统的方法 GHOST备份系统教程
- python实现K近邻算法
- Sketch颜色替换更改插件 PasteDirect v1.0破解版
- Pytorch—模型微调(fine-tune)
- 王者荣耀服务器微信怎么和电脑,[技术贴]微信账号与游戏账号独立的终极版教程...
- Mac环境下简化ssh连接vlab口令实现免密登录(UNSW)
- bmob php支付,GitHub - bmob/bmob-php-sdk: PHP SDK相关源码
热门文章
- django系列3—数据库字段类型
- composer安装yii2
- 命运神界服务器维护,命运神界梦境链接选哪个服务器比较好 官服B服选择推荐[多图]...
- ObjectARX(C++)-ADSRX和用户交互-选择集(SelectionSet)
- CSS学习(05结构伪类选择器 浮动及清除)
- 掩膜裁剪tif步骤_使用Matlab裁剪栅格数据
- 现代循环神经网络 - 门控循环单元
- JavaScript之E6语法
- android学习记录3:自定义状态栏颜色(android4.4以上)
- 论文写作要点总结(持续更新)