首页前端开发HTML.height()的注意事项及实例

.height()的注意事项及实例

时间2024-05-08 21:38:03发布访客分类HTML浏览60
导读: .height( 描述: 获取匹配元素集合中的第一个元素的当前计算高度值。 添加的版本: 1.0.height( 这个方法不接受任何参数。 .css('height' 和 ....
  .height()      描述: 获取匹配元素集合中的第一个元素的当前计算高度值。      添加的版本: 1.0.height()      这个方法不接受任何参数。      .css('height') 和 .height()之间的区别是后者返回一个没有单位的数值(例如,400),前者是返回带有完整单位的字符串(例如,400px)。当一个元素的高度需要数学计算的时候推荐使用.height() 方法 。      这个方法同样能计算出window和document的高度。      $(window).height(); // returns height of browser viewport      $(document).height(); // returns height of HTML document      注意.height()总是返回内容宽度,不管CSS box-sizing属性值。      注意:在绝对定位和给定display:block时,虽然style和script标签用.width() 或 height()也将报告一个值,强烈建议不要在这些标签中调用这些方法。这是一种不好的做法,结果也证明是不可靠的。      例子:      显示各个高度。注意这个来自值iframe的值可能小于你的预期。黄色高亮显示iframe body。                              body { background:yellow; }      button { font-size:12px; margin:2px; }      p { width:150px; border:1px red solid; }      div { color:red; font-weight:bold; }                              Get Paragraph Height      Get Document Height      Get Window Height      
& nbsp;
     

     Sample paragraph to test height      

           function showHeight(ele, h) {      $("div").text("The height for the " + ele +      " is " + h + "px.");      }      $("#getp").click(function () {      showHeight("paragraph", $("p").height());      } );      $("#getd").click(function () {      showHeight("document", $(document).height());      } );      $("#getw").click(function () {      showHeight("window", $(window).height());      } );                  

声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!


若转载请注明出处: .height()的注意事项及实例
本文地址: https://pptw.com/jishu/655782.html
JavaScript Number()把字符串转换为数值 介绍HTML-u标签的定义

游客 回复需填写必要信息