首页 > 其他分享 >jquery使用height()返回元素高度总是为0

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

时间:2023-03-20 20:03:11浏览次数:40  
标签:jquery console clearfix 元素 高度 mHeight height

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,console,clearfix,元素,高度,mHeight,height
From: https://blog.51cto.com/u_3871599/6138550

相关文章

  • jQuery的Command模式插件 command.js
    基于jQuery的Command模式插件。该插件将页面元素看成是一个个的对象,通过插件给对象赋予特定的状态,并定义特定的Command。一旦发生关联操作的时候,可以通过通知修改状态或者......
  • 【Python】数据结构:字典,元素为键值对表示
    1.字典可以存储任意类型对象,每个元素由键值对组成。花括号scores={'张三':99,'李四':64,'王五':88}print(scores)#{'张三':99,'李四':64,'王五':88}pri......
  • 定位、opacity透明度属性、visibility和display隐藏元素
    定位、opacity透明度属性、visibility和display隐藏元素1.定位position(确定的是移动的基准)static,默认值。静态的。(不让动)relative,相对。相对于自身的位置来移动......
  • Jquery安装以及引用
    1.安装Jquery文件进入官网-进行安装-安装完成后-拖拽Jquery.js文件至项目下(根目录或者JS目录下)-在html-body-进行引入<scriptsrc='引入刚才jquery包'></script> ......
  • vue2、等dom更新完之后再执行,获取dom元素 ref
    $nextTick作用:等Dom更新完以后再执行//等Dom更新完以后再执行this.$nextTick(()=>{varobj=newWxLogin({id:"weixin",......
  • jQuery
    jQuery语法1、引用声明:<scriptsrc="jQuery文件URL"type="text/javascript"charset="UTF-8"></script>2、基础语法结构:jQuery的美元符号$是jQuery的简写文档就绪......
  • JUC源码学习笔记8——ConcurrentHashMap源码分析1 如何实现低粒度锁的插入,如何实现统
    源码基于jdk1.8这一片主要讲述ConcurrentHashMap如何实现低粒度锁的插入,如何实现统计元素个数,如何实现并发扩容迁移系列文章目录和关于我一丶ConcurrentHashMap概述......
  • Html jquery AJAX 循环 延时 刷新
    JSON(PHP)<?php@header("content-type:application/json;charset=UTF-8");echo'{"status":200,"data":{"name":"55","student":[{"id":10001,"name":"张三"},{......
  • JQuery教程
    JQuery教程一、简介概述jQuery是一套兼容多浏览器的javascript脚本库.。核心理念是写得更少,做得更多,使用jQuery将极大的提高编写javascript代码的效率,帮助开发......
  • 【Ajax技术】JQuery处理XML数据
    我们将之前写的应用使用jquery返回xml数据程序清单服务端Servelt:AjaxXMLServer.java静态页面:ajaxJqueryXml.htmljavascript脚本文件:verifyj......