.width()

API

.width()

Vypočíta aktuálnu šírku prvého z vybraných elementov.

Rozdiel medzi .css('width') a .width() je ten, že vráti hodnotu bez 'px' hodnoty (napríklad 400) zatiaľ čo .css() vráti s jednotkami (napríklad 400px). .width() metóda je dôležitá ak potrebujete výšku elementu použiť na matematické výpočty.

Táto metóda je tiež schopná zistiť šírku okna a dokumentu.

$(window).width();   // vrati sirku zobrazenej casti prehliadaca
$(document).width(); // vrati sirku HTML dokumentu

Priklady:

Ukazka roznych sirok. Poznamka: tieto hodnoty su z iframe, takze su mensie ako by ste mohli ocakavat. Zlte zvyraznenie ukazuje iframe telo. 
 <!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="http://code.jquery.com/jquery-latest.js"></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>
    <script>
      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>
  </body>
</html>

.width(value)

Nastaví CSS šírku pre každy vybraný element.

Pri volaní .width(value), môže byť hodnota reťazcom (číslo a jednotka) alebo číslom. Ak je hodnota iba číslo, jQuery predpokladá, že ide o pixel(px) jednotky. Ak sa jedná o reťazec, môže byť použitá akákoľvek validná CSS jednotka na meranie šírky (napr. 100px, 50%, alebo auto). Všimnite si, že v moderných prehliadačoch, CSS vlastnosť width nezahŕňa padding, border ani margin.

Ak nieje uvedená jednotka (ako 'em' alebo '%') tak je do hodnoty vložená 'px' jednotka.

Všimnite si, že .width('value') nastavuje šírku boxu v súlade s CSS box-sizing vlastnosťami. Zmena tejto vlastnosti na border-box zmení túto funkciu na outerWidth.

Priklady:

Ukazka roznych sirok. Poznamka: tieto hodnoty su z iframe, takze su mensie ako by ste mohli ocakavat. Zlte zvyraznenie ukazuje iframe telo. 
 <!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="http://code.jquery.com/jquery-latest.js"></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>
    <script>
      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>
  </body>
</html>

© Shaddow