width()

תוכן:

width()
- .width()
width( value )
- .width( value )
- .width( function(index, width) )

width()

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

.width( )

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

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

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

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

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

דוגמה

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

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

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

נסה זאת בעצמך

קוד מלא:

<!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 showWidth(ele, w) {
      $("div").text("The width for the " + ele + 
                    " is " + w + "px.");
    }
    $("#getp").click(function () { 
      showWidth("paragraph", $("p").width()); 
    });
    $("#getd").click(function () { 
      showWidth("document", $(document).width()); 
    });
    $("#getw").click(function () { 
      showWidth("window", $(window).width()); 
    });
  });

</script>

</head>
<body>
	<button id="getp">Get Paragraph Width</button>
  <button id="getd">Get Document Width</button>

  <button id="getw">Get Window Width</button>

  <div>&nbsp;</div>
  <p>
    Sample paragraph to test width
  </p>

</body>
</html>

נסה זאת בעצמך

width( value )

מחזירה: jQuery

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

.width( value )

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

value

מספר שלם

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

.width( function(index, width) )

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

function(index, width)

פונקציה

הפונקציה מחזירה את רוחב להגדרה. מקבל את המיקום כאינדקס של האלמנט בקבוצה ואת רוחב הישן כארגומנטים.

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

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

דוגמה

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

    $("div").one('click', function () {
      $(this).width(30)
             .css({cursor:"auto", "background-color":"blue"});
    });

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

נסה זאת בעצמך

קוד מלא:

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

<html>
<head>
  <style>
  div { width:70px; height:50px; float:left; margin:5px;
        background:red; cursor:pointer; }
  </style>

   <script src="http://code.jquery.com/jquery-latest.js"></script>

<script>
  $(document).ready(function(){
    $("div").one('click', function () {
      $(this).width(30)
             .css({cursor:"auto", "background-color":"blue"});
    });
  });


</script>

</head>
<body>
  <div></div>
  <div>d</div>
  <div>d</div>

  <div>d</div>
  <div>d</div>
</body>
</html>

נסה זאת בעצמך

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

כן לא

width()

width()

.width( )

דוגמה

width( value )

.width( value )

.width( function(index, width) )

דוגמה

תגובות