height()

תוכן:

height()
- .height()
height( value )
- .height( value )

height()

מחזירה: מספר שלם

הוספה בגרסה: 1.0

תיאור: מחזיר ערך נוכחי של גובה בנקודות עבור אלמנט ראשון בהתאמה.

ההבדל בין .css('height') ו- .height() הוא שבאחרון מוחזר ערך ללא יחידת מדידה (למשל, 400), אבל בדוגמה הראשונה מוחזר ערך עם יחידת מדידה (למשל, 400px). שיטה .height() מומלצת יותר כשה ערך מוחזר דרוש לחישובים מתמטיים.

שיטה מסוגלת למצוא גובה של חלון ומסמך.

$(window).height();   // returns height of browser viewport
$(document).height(); // returns height of HTML document

דוגמאות

דוגמה 1

מציג מספר ערכי גובה. שימו לב, ערכים יכולים להיות קטנים יותר, מאשר היה צפוי, מכיוון שערכים הם מ- iframe. צבע צהוב מציג גוף של iframe.

  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()); 
  });

תוצאת הפעלה קוד לעיל:

נסה זאת בעצמך

קוד מלא:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">

<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="http://code.jquery.com/jquery-latest.js"></script>

<script>
  $(document).ready(function(){
  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()); 
  });
 });
  </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>

</body>
</html>

נסה זאת בעצמך

height( value )

מחזירה: jQuery

הוספה בגרסה: 1.0

תיאור: מגדיר גובה של CSS עבור כל אלמנט בהתאמה.

כשה נקרא .height(value), ערך יכול להיות מחרוזת ( מספר ויחידת מדידה ) או מספר. אם רק מספר נשלח בתור פרמטר, jQuery מתייחס אליו כי ערך בנקודות. אם נשלחה מחרוזת, עם זאת, רק ערך CSS תיקני יכול להשתמש כי גובה ( כמו 100px, 50%, או auto ). שימו לב, שבדפדפנים המודרנים, מאפיין CSS height לא מכיל padding, border, או margin.

אם לא צוינה יחידת מדידה ( כמו 'em' או '%' ), אז «px» מתווסף לערך.

ארגומנטים

value

מספר שלם, מחרוזת

מספר שלם מייצג את מספר בנקודות, או מספר שלם יחד עם יחידת מדידה ( כמו מחרוזת ).

דוגמה

בלחיצה מגדיר גובה של כל div ל- 30px וגם מחליף צבע רקע.

    $("div").one('click', function () {
      $(this).height(30)
             .css({cursor:"auto", backgroundColor:"green"});
    });

תוצאת הפעלה קוד לעיל:

נסה זאת בעצמך

קוד מלא:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
  <style>div { width:50px; height:70px; float:left; margin:5px;
        background:rgb(255,140,0); cursor:pointer; }  </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>

<script>
  $(document).ready(function(){
    $("div").one('click', function () {
      $(this).height(30)
             .css({cursor:"auto", backgroundColor:"green"});
    });
  });
  </script>
</head>
<body>

  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>

</body>
</html>

נסה זאת בעצמך

האם מידע זה היה מועיל?

כן לא

height()

height()

דוגמאות

דוגמה 1

height( value )

ארגומנטים

דוגמה

תגובות