html 获取不到offsetHeight

2024-10-28

获取不到offsetHeight问题

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } .imgBox ul{ list-style: none; width:630px; margin:0 auto; position:relative; }

今晚试了好久没弄出来,后来获取子一层的div就能获取到高度了我的情况是这样的:我在最外面写一个<div id="mainBody">, 里面写bootstrap的div,获取mainBody的offsetHeight为0,而子div(bootstrap的div)能够显示offsetHeight. 百度了好久,终于找到一个网页:http://bbs.csdn.net/topics/390355106 原来是浮动的问题,那就好办了,直接在#mainBody的里面加上<

offsetTop,offsetHeight,clientHeight,scrollHeight,scrollTop区别

这些高度相信很多同学都搞不清楚吧.这里我通过本地测试,发现了区别. 以聊天窗口为例. 元素(class='content')高度444px,其中上下padding分别是10px,margin为0.距离最近的一个定位的父元素的上边距是60px. 这里,在控制台打印出各个高度值: var c =document.getElementsByClassName('content')[0]; console.log(c.offsetTop,c.offsetHeight,c.clientHeight,c.s

iOS UIWebView 获取内容实际高度，关闭滚动效果

本文转载至 http://my.oschina.net/Khiyuan/blog/341535 iOS UIWebView 获取内容实际高度,关闭滚动效果近期做东西,将 UIWebView 嵌套在 UIScrollView 里,由 UISCrollView 控制滚动,需要使 UIWebView 的高度同内容高度一致,网上搜索的到代码:  htmlHeight = [webView stringByEvaluatingJavaScriptFromStri

bootstrap插件思路整理

知识有时也需温故知新嘛,本次做一次bs插件梳理. $.support.transition 通过判断自定义元素是否支持WebkitTransition.MozTransition.OTransition和transition来判断当前浏览器是否支持transition这个css3属性 Modal 从UI功能角度来说,点击某个元素来触发弹出一个对话框.在插件第一次加载的时候,用body监听所有data-toggle="modal"属性元素.一来达到事件绑定的目的,而来为后续异步加入同属性

js判断页面出现滚动条

当可视区域小于页面的实际高度时,判定为出现滚动条当我们在获取页面的offsetHeight高度时是包括了浏览器的边框的,浏览器的边框是2个像素, if (document.documentElement.clientHeight < document.documentElement.offsetHeight-4){ //执行出现纵向滚动条时相关脚本. } if ((document.documentElement.clientWidth < document.documentEle

Vue中过度动画效果应用

一.实现动画过渡效果的几种方式实现动画必须要将要进行动画的元素利用<transition>标签进行包裹 1.利用CSS样式实现过渡效果 <transition name="fade"></transition> v-enter: 定义进入过渡的开始状态.在元素被插入时生效,在下一个帧移除. v-enter-active: 定义进入过渡的结束状态.在元素被插入时生效,在 transition/animation 完成之后移除. v-leave: 定义

jquery html() callback

通过JQuery的.html()函数我们可以非常方便地加载一段HTML到指定的元素中,例如给<div></div>中放入一组图片.问题是JQuery的.html()函数是同步的,如果我们想知道HTML被加载之后容器的高,例如获取容器的offsetHeight或scrollHeight属性的值,必须要等HTML元素中所有的内容都加载完毕后才能获取到真实的值,尤其是HTML中包含有image标签时.那如何才能实现.html()函数的回调方法呢?答案是使用前端的Q. 对应的代码如下: v

JS判断页面是否出现滚动条

今天无聊,帮一个网友解决一个很无聊的问题,用JS判断页面是否出现滚动条,在网上看了一些代码,经过验证并不起作用,下面是在网上搜索到的代码: 当可视区域小于页面的实际高度时,判定为出现滚动条,即: if (document.documentElement.clientHeight < document.documentElement.offsetHeight) scroll = true; 要使用 document.documentElement ,必须在页面头部加入声明: <!DOCTYPE

Javascript Event事件-总结

一.事件类型例如:mouseover鼠标移动到.keydown键盘按下二.事件目标是发生的事件或与之相关的对象,window.document和Element对象是最常见的事件目标三.事件对象是与特定事件相关且包含有关该事件详细信息的对象用来指定事件类型的属性type 用来指定事件目标的属性target 四.事件类型鼠标事件 ‘mousedown’ – 鼠标设备按下一个元素的时候触发mousedown事件. ‘mouseup’ – 鼠标设备从按下的元素上弹起的时候触发mouseup

js判断滚动条是否已到页面最底部或顶部实例

原文本文实例讲述了js判断滚动条是否已到页面最底部或顶部的方法.分享给大家供大家参考.具体分析如下: 我们经常会看到很多的网站一个返回顶部效果就是当我们滚动条到指定位置时返回顶部出来了,否则就自动隐藏了,下面就来给大家介绍这种效果实现原理与方法. 当可视区域小于页面的实际高度时,判定为出现滚动条,即: 复制代码代码如下: if (document.documentElement.clientHeight < document.documentElement.offsetHeight) scr

JavaScript获取浏览器高度和宽度值(documentElement,clientHeight,offsetHeight,scrollHeight,scrollTop,offsetParent,offsetY,innerHeight)

IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 可见区域宽度 document.documentElement.clientHeight ==> 可见区域高度 FireFox中: document.body.clientWidth ==> BODY对象宽度 document.

style设置/获取样式的问题和 offsetWidth/offsetHeight的问题

style设置/获取样式的问题:1.js通过style方法 --加样式:加的是行间样式 oDiv.style.width="20"+'px'; --取样式:取得是行间样式 alert(oDiv.style.width) --当css写在样式表里(即css全部写在行外)的时候获取不到 --alert(oDiv.style.width)是错误的行内样式的优先级最高,当js通过style方法添加了样式之后,js再通过修改class的值为同一元素增加样式,最终行内样式优

浏览器中如何获取想要的offsetwidth、、、clientwidth、、offsetheight、、、clientheight。。。

clientWidth是对象看到的宽度(不含边线,即border)scrollWidth是对象实际内容的宽度(若无padding,那就是边框之间距离,如有padding,就是左padding和右padding之间距离).offsetWidth是指对象自身的宽度,整型,单位像素(含边线,如滚动条的占用的宽,值会随着内容的输入而不断改变). scrollHeight: 获取对象的滚动高度.scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离scrollTop:设置或获

apiCloud中aui获取不到高度，pos.h为0，offsetHeight为0问题

apiCloud中aui获取不到高度,pos.h为0,offsetHeight为0问题原HTML <div class="row aui-text-center"> <div class="aui-col-xs-2" style="cursor: pointer;" onclick="api.closeWin({});"> <i class="aui-iconfont aui-icon

Jquery获取offsetHeight

纯javascript: window.document.getElementById('MainColumn').offsetHeight jquery: $('#id').get(0).offsetHeight

style="display"之后不能获取offsetHeight或clientWidth这类测量的值

如果在html元素中设置了style="display:none;height:90px;"的属性后,是无法获得offsetLeft ,offsetWidth,offsetTop,offsetHeight以及兼容性更好的clientHeight,clientHeight等(client..属性会比offset大些,因为可能包含边框或滚动条)这类测量的值,因为一旦display:none之后浏览器没有渲染也就不会去测量.但你可以得到style中的height:90px;还有你在style

如何通过jQuery获取一个没有定高度的元素---------的自适应高度(offsetHeight的正确使用方法)

<!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="Content-Typ

HTML 获取屏幕、浏览器、页面的高度宽度

本篇主要介绍Web环境中屏幕.浏览器及页面的高度.宽度信息. 目录 1. 介绍:介绍页面的容器(屏幕.浏览器及页面).物理尺寸与分辨率.展示等内容. 2. 屏幕信息:介绍屏幕尺寸信息:如:屏幕.软件可用以及任务栏的高度和宽度. 3. 浏览器信息:介绍浏览器尺寸信息:如:浏览器.内部页面以及工具栏的高度和宽度. 4. 页面信息:介绍HTML页面尺寸信息:如:body总的.展示的高度和宽度. 一.介绍 1. 容器一个页面的展示,从外到内的容器为:屏幕.浏览器以及页面本身. HTML元素展现在页面内

js获取屏幕宽高

最近想自己实现一个全屏滚动. 结果一开始就遇到了问题.因为不知道如何获取一个页面屏幕的高度. 网上所有的博客都是复制粘贴. 网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHeight (包括边线的宽) 网页正文全文宽:document.body.scrollWidt