height

Module

Methods

NodeList.height()
Number height ()
得到当前节点列表第一个节点的计算高度
Return type:number

css('height')height() 的区别在于 height() 返回不带单位的纯数值, 而 css('height') 则返回带单位的原始值(例如 40% ).

当需要数值计算时, 推荐该方法, 如图所示:(from jquery)

该方法也可以用来得到 windw 和 document 的高度
KISSY.use("node",function(S,Node){
    Node.all(window).height(); // 得到浏览器可以区域的高度, 相当于 DOM.viewportHeight()
    Node.all(document).height(); //得到 html 文档的高度, 相当于 DOM.docHeight()
});
NodeList height ( value )
设置当前列表每个元素的 css height 值.
Parameters:value (number|string) – 代表像素的整数值, 或数字加上其他单位的字符串值.

Note

在现代浏览器中, css height 属性不包括 padding , border 或者 margin.

Demo

得到各种各样的高度, 黄色高亮区域代表 iframe 体

<!DOCTYPE html>
<html>
<head>
  <style>
  body { background:yellow; }
  button { font-size:12px; margin:2px; }
  p { width:150px; border:1px red solid; }
  div { color:red; font-weight:bold; }
  </style>
  <script src="//g.alicdn.com/kissy/k/1.4.7/seed.js" data-config="{combine:true}"></script>
</head>
<body>
  <button id="getp">Get Paragraph Height</button>
  <button id="getd">Get Document Height</button>
  <button id="getw">Get Window Height</button>

  <div>&nbsp;</div>
  <p>
    Sample paragraph to test height
  </p>
<script>
    KISSY.use("node",function(S,Node){
        var $=Node.all;
        function showHeight(ele, h) {
          $("div").text("The height for the " + ele + 
                        " is " + h + "px.");
        }
        $("#getp").on("click",function () { 
          showHeight("paragraph", $("p").height()); 
        });
        $("#getd").on("click",function () {
          showHeight("document", $(document).height()); 
        });
        $("#getw").on("click",function () { 
          showHeight("window", $(window).height()); 
        });
    });
</script>

</body>
</html>

设置元素的高度

<!DOCTYPE html>
<html>
<head>
  <style>div { width:50px; height:70px; float:left; margin:5px;
        background:rgb(255,140,0); cursor:pointer; }  </style>
  <script src="//g.alicdn.com/kissy/k/1.4.7/seed.js" data-config="{combine:true}"></script>
</head>
<body>
  <div></div>
  <div></div>

  <div></div>
  <div></div>
  <div></div>
<script>
    KISSY.use("node",function(S,Node){
        var $=Node.all;
        function handle(){
            $(this).detach();
            $(this).height(30)
                 .css({cursor:"auto", backgroundColor:"green"});
        }            
        $("div").on('click', handle);
    });    
</script>

</body>
</html>