.width() vráti: Integer
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> </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) vráti: jQuery
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> </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>