各情景下元素宽高的获取实现代码
代码 实现 获取 元素 宽高 情景
2023-06-13 09:14:30 时间
情景一,元素style属性设置了width/height
复制代码代码如下:
<divstyle="width:100px;">test<div>
<script>
vardiv=document.getElementsByTagName("div")[0];
alert(div.style.width);
</script>
如上,使用el.style.width即可。如果没有在style属性中设置width,那么使用el.style.width将获取不到,如下
<div>test<div>
<script>
vardiv=document.getElementsByTagName("div")[0];
alert(div.style.width);
</script>
所有浏览器中弹出的是空字符串。即使将样式嵌在页面的css中也仍然获取不到,如下
<style>
div{width:100px}
</style>
<div>test<div>
<script>
vardiv=document.getElementsByTagName("div")[0];
alert(div.style.width);
</script>
这时候getComputedStyle或currentStyle将会派上用场。
情景二,元素通过引入样式表设置width/height
有两种方式引入样式表,一是使用link标签引入单独的css文件,二是直接在html页面中使用style标签。这里使用第二种方式测试。如下
<style>
div{width:100px}
</style>
<div>test<div>
<script>
functiongetStyle(el,name){
if(window.getComputedStyle){
returnwindow.getComputedStyle(el,null);
}else{
returnel.currentStyle;
}
}
vardiv=document.getElementsByTagName("div")[0];
alert(getStyle(div,"width"));
</script>
所有浏览器中均弹出了100px。说明通过getComputedStyle和currentStyle可以获取到元素被定义在样式表中的宽高。
那如果元素即没有在style属性中设置宽高,也没有在样式表中设置宽高,还能用getComputedStyle或currentStyle获取吗?答案是getComputedStyle可以,currentStyle不可以。如下
<div>test<div>
<script>
functiongetStyle(el,name){
if(window.getComputedStyle){
returnwindow.getComputedStyle(el,null);
}else{
returnel.currentStyle;
}
}
vardiv=document.getElementsByTagName("div")[0];
alert(getStyle(div,"width"));
</script>
div既没有设置style属性,也没有引入样式表。在Firefox/IE9/Safari/Chrome/Opera中可以获取到宽高(浏览器默认),但IE6/7/8中却不行,返回的是auto。
注意,这里getStyle方法优先使用getComputedStyle,而IE9已经支持该方法。因此IE9中可以获取到宽高。但IE6/7/8不支持,只能使用currentStyle获取。
情景三,元素既没有设置style属性,也没有引入样式表
<div>test<div>
<script>
functiongetStyle(el,name){
if(window.getComputedStyle){
returnwindow.getComputedStyle(el,null)[name];
}else{
returnel.currentStyle[name];
}
}
functiongetWH(el,name){
varval=name==="width"?el.offsetWidth:el.offsetHeight,
which=name==="width"?["Left","Right"]:["Top","Bottom"];
//displayisnone
if(val===0){
return0;
}
for(vari=0,a;a=which[i++];){
val-=parseFloat(getStyle(el,"border"+a+"Width"))||0;
val-=parseFloat(getStyle(el,"padding"+a))||0;
}
returnval+"px";
}
vardiv=document.getElementsByTagName("div")[0];
alert(getWH(div,"width"));
</script>
思路很简单:获取元素的offsetWidth/offsetHeight,减去元素的padding和border。
相关文章
- ResNet18代码实现[通俗易懂]
- 作业总结:磨皮滤镜(双边滤波bilateralFilter)代码实现[通俗易懂]
- html怎么动态获取系统时间_代码实现获取当前的地理位置
- 2022-11-12:以下rust语言代码中,结构体S实现了crate::T1::T2的方法,如何获取方法列表?以下代码应该返回[“m1“,“m2“,“m5“]
- R语言预测期货波动率的实现:ARCH与HAR-RV与GARCH,ARFIMA模型比较|附代码数据
- php三维饼图的实现代码
- 使用PHP获取网络文件的实现代码
- 基于jquery的获取mouse坐标插件的实现代码
- jQuery前台数据获取实现代码
- PHP中获取内网用户MAC地址(WINDOWS/linux)的实现代码
- Js获取asp页面返回的值(加载值)实现代码
- jQuerybxCarousel实现图片滚动切换效果示例代码
- jQuery动态地获取系统时间实现代码
- js获取input标签的输入值实现代码
- jquery实现多级下拉菜单的实例代码
- js实现幻灯片播放图片示例代码
- JS简单实现文件上传实例代码(无需插件)
- javascript获取xml节点的最大值(实现代码)
- js获取鼠标点击的位置实现思路及代码
- javascript实现倒计时N秒后网页自动跳转代码