`

jquery使用height()返回元素高度总是为0

 
阅读更多
http://my.oschina.net/qii/blog/412763
var mObj = $('#menu_list');
var mHeight = mObj.height();
console.log(mHeight);//0

当我在console里面,直接获取元素的高度,又是正常的。
$('#menu_list').height();//45

百度了一下,jQuery使用height()返回0的问题,都是说因为jQuery无法获取隐藏元素.但是我的元素是显示的,并没有隐藏。

仔细想了下,想起来是菜单下面的元素使用了float属性。而float属性,会导致父元素的高度为0.以前在chrome或者Firefox下查看元素,父元素的高度都会是0.chrome的标尺会直接标出来是0,而Firefox下,则会看不到父元素。

想到了这点,就开始验证。
.clearfix:after{display: block;height:100%;_height:100%;clear:both;content:'\020';}
.clearfix{zoom:1;}

加入clearfix的样式
<ul id="menu_list" class="clearfix">
....
</ul>

再次刷新页面:
console.log(mHeight);//45

OK!
分享到:
评论

相关推荐

    jquery实现动态改变div宽度和高度

    而如果没有传递参数,它则会返回当前元素的宽度或高度。 在文章中提供的HTML代码中,我们定义了一个div元素,并通过id属性给它一个标识符"keleyidiv"。同时,页面上还放置了四个按钮,分别对应增加宽度、减少宽度、...

    jQuery 获取屏幕高度和宽度

    本文将详细讲解如何使用jQuery获取屏幕的高度和宽度,这对于创建响应式网页设计或者根据屏幕尺寸调整元素布局至关重要。 首先,我们需要了解什么是屏幕高度和宽度。屏幕高度是指浏览器窗口可视区域的垂直尺寸,而...

    jQuery获取浏览器窗口的宽度和高度

    本篇文章将详细介绍如何使用 jQuery 获取浏览器窗口的宽度和高度,并对比不同方法的使用效果。 首先,`$(window).height()` 和 `$(window).width()` 是用来获取浏览器当前窗口可视区域的高度和宽度,也就是用户在...

    jQuery使用height()获取高度需要注意的地方

    总结一下,使用jQuery的`height()`函数获取元素高度时,要注意以下几点: 1. `height()`返回的是元素的净高度,包括内边距,但不包括边框和外边距。 2. 隐藏的元素(`display:none`)无法通过`height()`获取高度。 3...

    jquery返回顶部代码

    在实现返回顶部功能时,我们通常会获取当前页面的滚动高度,当这个值不为0时,说明页面已被滚动。 2. **`animate()`函数**:此函数用于创建平滑的动画效果。我们可以利用它将页面的滚动位置在一定时间内平滑地移动...

    JQUERY精选使用方法

    在使用jQuery的过程中,通过`$()`函数选择页面中的元素是十分基础的操作。这个选择器支持多种方式来定位DOM元素,比如通过ID、类名、元素名称甚至是复杂的DOM或XPath表达式。返回的结果是一个jQuery对象(实际上是...

    实现返回顶部和底部的Jquery特效

    本文将详细探讨如何使用JQuery实现返回顶部和底部的特效。 首先,我们需要在HTML文档中添加必要的结构。为了实现返回顶部的按钮,可以在页面底部添加一个锚点元素,例如: ```html &lt;a id="top"&gt;&lt;/a&gt; 返回顶部 ``` ...

    jQuery详细教程

    jQuery 使用 XPath 表达式来选择带有给定属性的元素。 $("[href]") 选取所有带有 href 属性的元素。 $("[href='#']") 选取所有带有 href 值等于 "#" 的元素。 $("[href!='#']") 选取所有带有 href 值不等于 "#" 的...

    jquery如何获取元素的滚动条高度等实现代码

    本篇文章将详细介绍如何使用jQuery来获取元素的滚动条高度以及其他相关实现代码。 首先,要理解滚动条高度通常是指元素内容超出其可视区域的部分,可以通过`scrollTop()`方法获取。例如,`$(document).scrollTop()`...

    jquery 使用简明教程

    4. `.width()` 和 `.height()` 获取或设置元素的宽度和高度。 5. `.val()` 用于获取表单元素的值。 注意,赋值时对结果集中所有元素生效,而取值通常只取第一个元素(`.text()`例外,它返回所有元素的文本内容)。 ...

    jquery函数使用

    jQuery提供了`.height()`和`.width()`方法来改变元素的高度和宽度。例如,`$(this).height("500px");`和`$(this).width("500px");`分别设置当前元素的高度和宽度为500像素。 5. **选择特定索引的元素**: `.eq()`...

    JS,Jquery获取各种屏幕的宽度和高度

    - 这两个属性返回元素的宽度和高度,包括内容、内边距、边框,但不包括外边距(margin)。 3. **`document.body.scrollWidth`** 和 **`document.body.scrollHeight`**: - `scrollWidth` 返回元素的总宽度,包括...

    Jquery返回顶部 底部

    - **jQuery代码**:使用`height()`方法获取页面的总高度,然后将滚动位置设置为这个高度,实现返回底部的效果。 ```javascript $(document).ready(function(){ $("#bottomBtn").click(function(){ $("html, ...

    JQuery学习笔记(日常积累)

    - `height()`和`width()`用于获取或设置元素的高度和宽度,如`$("#msg").height("300")`设置高度为300像素。 - `val()`方法用于获取或设置表单元素的值,如`$("input").val("test")`。 5. **事件处理**: - `...

    jQuery简洁易用返回网页顶部(底部)代码

    **jQuery 简洁易用返回网页顶部(底部)代码详解** 在网页设计中,提供一个方便用户快速回到页面顶部或底部的功能是非常重要的用户体验优化。jQuery 提供了一种简单高效的方式来实现这一功能,无需复杂的 JavaScript ...

    jQuery使用经典案例

    例如,`$("#myID")`选取ID为"myID"的元素,`$(".myClass")`选取所有class为"myClass"的元素,`$("input[type=text]")`选取所有文本输入框。 二、DOM操作 1. 获取与设置属性:`$("#element").attr("attribute", ...

    jQuery页面滚动文字图片元素淡入动画特效.zip

    `$(window).scrollTop()`返回滚动条的当前位置,`$(document).height()`和`$(window).height()`分别获取文档和窗口的高度,结合这些值可以判断元素是否在视口范围内。 然后,使用`.animate()`函数指定动画效果。...

    jQuery中height()方法用法实例

    在使用height()方法设置元素高度时,如果元素之前没有定义高度,则会增加元素的高度。如果元素已经有定义的高度,height()方法则会修改这个高度值,而不是替换它。这意味着height()方法可以用来动态地增加或减少元素...

    jquerytabs jquery选项卡 jquery tabs

    - `heightStyle`: 控制选项卡高度,可选值有`auto`(适应内容高度)、`fill`(填充父元素高度)和`content`(不设置高度)。 此外,还可以使用一些方法来操作选项卡: - `tabs("option", optionName, [value])`: ...

    jquery汇总

    - **获取元素高度**:`$("#myid").height()` 返回元素的高度(不包括边框、内边距)。 - **获取元素位置**:`$("#myid").offset()` 返回元素相对于文档的位置,包括`top`和`left`两个属性。 - **获取元素HTML...

Global site tag (gtag.js) - Google Analytics