jQuery - Dimenzije (Dimensions)


Šta su jQuery dimenzije?

jQuery nudi nekoliko metoda, kao što su: height(), innerHeight(), externalHeight(), width(), innerWidth() i externalWidth() za dobijanje i postavljanje CSS dimenzija za elemente. Pogledajmo sljedeću ilustraciju kako biste razumjeli kako ove metode izračunavaju dimenzije okvira elementa.






jQuery metode width() i height()

jQuery metode width() i height() dobijaju ili postavljaju širinu i visinu elementa. Ova širina i visina ne uključuju popunjavanje, bordere i margine na elementu. Sljedeći primjer će vratiti širinu i visinu <div> elementa.

<script>
$(document).ready(function(){
    $("button").click(function(){
        var divWidth = $("#box").width();
        var divHeight = $("#box").height();
        $("#result").html("Visina: " + divWidth + ", " + "Širina: " + divHeight);
    });
});
</script>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Dobijanje širine i visine elementa</title>
<style>
    #box{
        width: 300px;
        height: 200px;
        padding: 25px;
        text-align: justify;
        border: 10px solid #c6b51a;
        background: #f0e68c;
        margin: 15px;
    }        
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        var divWidth = $("#box").width();
        var divHeight = $("#box").height();
        $("#result").html("Visina: " + divWidth + ", " + "Širina: " + divHeight);
    });
});
</script>
</head>
<body>
    <div id="box">Lorem ipsum dolor sit amet, consectetur adipiscing
    elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna
    metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum
    id metus ac nisl bibendum scelerisque non non purus. Suspendisse
    varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum
    vestibulum. Vivamus fermentum in arcu in aliquam. Quisque 
    aliquam porta odio in fringilla non purus nisld Dapibus nec turpis 
    vel, semper malesuada ant.</div>
    <button type="button">Prikaži visinu i širinu elementa</button>
    <p id="result"></p>
</body>
</html>

Slično tome, možete postaviti širinu i visinu elementa tako što ćete vrijednost uključiti kao parametar unutar metoda width() i height(). Vrijednost može biti niz (broj i jedinica, npr. 100px, 20em, itd.) ili broj. Sljedeći primjer će postaviti širinu <div> elementa na 400px, a visinu na 300px.

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#box").width(400).height(300);
    });
});
</script>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Postavljanje širine i visine elemenata</title>
<style>
    #box{
        width: 300px;
        height: 200px;
        padding: 25px;
        text-align: justify;
        border: 10px solid #c6b51a;
        background: #f0e68c;
        margin: 15px;
    }        
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#box").width(400).height(300);
    });
});
</script>
</head>
<body>
    <div id="box">Lorem ipsum dolor sit amet, consectetur adipiscing
    elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna
    metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum
    id metus ac nisl bibendum scelerisque non non purus. Suspendisse
    varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum
    vestibulum. Vivamus fermentum in arcu in aliquam. Quisque 
    aliquam porta odio in fringilla non purus nisld Dapibus nec turpis 
    vel, semper malesuada ant.</div>
    <button type="button">Postavi širinu i visinu elementa</button>
</body>
</html>


jQuery metode innerWidth() i innerHeight()

jQuery metode innerWidth() i innerHeight() dobijaju ili postavljaju unutrašnju širinu i visinu elementa. Unutrašnja širina i visina obuhvataju granice, ali isključuju boredere i marginu na elementu. Sljedeći primjer će vratiti unutrašnju širinu i visinu elementa <div> klikom na dugme.

<script>
$(document).ready(function(){
    $("button").click(function(){
        var divWidth = $("#box").innerWidth();
        var divHeight = $("#box").innerHeight();
        $("#result").html("Inner visina: " + divWidth + ", " + "Inner širina: " + divHeight);
    });
});
</script>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Dobijanje Inner-Width iInner-Height elementa</title>
<style>
    #box{
        width: 300px;
        height: 200px;
        padding: 25px;
        text-align: justify;
        border: 10px solid #c6b51a;
        background: #f0e68c;
        margin: 15px;
    }        
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        var divWidth = $("#box").innerWidth();
        var divHeight = $("#box").innerHeight();
        $("#result").html("Inner visina je: " + divWidth + ", " + "Inner širina je: " + divHeight);
    });
});
</script>
</head>
<body>
    <div id="box">Lorem ipsum dolor sit amet, consectetur adipiscing 
    elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna 
    metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum
    id metus ac nisl bibendum scelerisque non non purus. Suspendisse
    varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum
    vestibulum. Vivamus fermentum in arcu in aliquam. Quisque 
    aliquam porta odio in fringilla non purus nisld Dapibus nec turpis 
    vel, semper malesuada ant.</div>

    <button type="button">Prikaži innerWidth i innerHeight</button>
    <p id="result"></p>
    <hr>
    <p><strong>Napomena:</strong> jQuery <b>innerWidth()</b> uklučuje CSS svojstvo 
    (<b>width</b> + <b>padding-left</b> + <b>padding-right</b>), a <b>innerHeight()</b> uključuje 
    (<b>height</b> + <b>padding-top</b> + <b>padding-bottom</b>).</p>
</body>
</html>

Slično tome, možete postaviti unutrašnju širinu i visinu elementa prosljeđivanjem vrijednosti kao parametra metodi innerWidth() i innerHeight(). Ove metode mijenjaju samo širinu ili visinu područja sadržaja elementa kako bi se podudarale s navedenom vrijednošću. Na primjer, ako je trenutna širina elementa 300px, a zbir lijeve i desne strane peddinga jednak 50px, nova širina elementa nakon postavljanja širine na 400px iznosi 350px, tj. nova širina = unutrašnja širina (inner widht) - vodoravno podmetanje. Slično tome, možete procijeniti promjenu visine dok postavljate unutrašnju visinu (inner height).

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#box").innerWidth(400).innerHeight(300);
    });
});
</script>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Postavljanje Inner-Width i Inner-Height unutar elementa</title>
<style>
    #box{
        width: 300px;
        height: 200px;
        padding: 25px;
        text-align: justify;
        border: 10px solid #c6b51a;
        background: #f0e68c;
        margin: 15px;
    }        
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#box").innerWidth(400).innerHeight(300);
    });
});
</script>
</head>
<body>
    <div id="box">Lorem ipsum dolor sit amet, consectetur adipiscing
    elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna
    metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum
    id metus ac nisl bibendum scelerisque non non purus. Suspendisse
    varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum
    vestibulum. Vivamus fermentum in arcu in aliquam. Quisque 
    aliquam porta odio in fringilla non purus nisld Dapibus nec turpis 
    vel, semper malesuada ant.</div>

    <button type="button">Postavi innerWidth i innerHeight</button>
</body>
</html>


jQuery metode externalWidth() i externalHeight()

jQuery metode externalWidth() i externalHeight() dobijaju ili postavljaju vanjsku širinu i vanjsku visinu elementa. Vanjska širina i visina uključuje padding i border, ali isključuje marginu na elementu. Sljedeći primjer će vratiti vanjsku širinu i visinu elementa <div> klikom na dugme.

<script>
$(document).ready(function(){
    $("button").click(function(){
        var divWidth = $("#box").outerWidth();
        var divHeight = $("#box").outerHeight();
        $("#result").html("Vanjska širina: " + divWidth + ", " + "Vanjsa visina: " + divHeight);
    });
});
</script>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery dobijanje Outer-Width i Outer-Height elementa</title>
<style>
    #box{
        width: 300px;
        height: 200px;
        padding: 25px;
        text-align: justify;
        border: 10px solid #c6b51a;
        background: #f0e68c;
        margin: 15px;
    }        
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        var divWidth = $("#box").outerWidth();
        var divHeight = $("#box").outerHeight();
        $("#result").html("Vanjska širina: " + divWidth + ", " + "Vanjska visina: " + divHeight);
    });
});
</script>
</head>
<body>
    <div id="box">Lorem ipsum dolor sit amet, consectetur adipiscing
    elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna
    metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum
    id metus ac nisl bibendum scelerisque non non purus. Suspendisse
    varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum
    vestibulum. Vivamus fermentum in arcu in aliquam. Quisque 
    aliquam porta odio in fringilla non purus nisld Dapibus nec turpis 
    vel, semper malesuada ant.</div>

    <button type="button">Prikaži outerWidth i outerHeight</button>
    <p id="result"></p>
    <hr>
    <p><strong>Napomena:</strong> jQuery <b>outerWidth()</b> uključuje CSS svojstvo (<b>width</b> + 
    <b>padding-left</b> + <b>padding-right</b> + <b>border-left</b> + <b>border-right</b>), a <b>outerHeight()</b> 
    uključuje (<b>height</b> + <b>padding-top</b> + <b>padding-bottom</b> + <b>border-top</b> + 
    <b>border-bottom</b>).</p>
</body>
</html>

Takođe možete dobiti vanjsku širinu i visinu koja uključuje padding i border kao i margin elementa. Za to samo navedite true parametar za metode vanjske širine, poput outerWidth(true) i outerHeight(true).

<script>
$(document).ready(function(){
    $("button").click(function(){
        var divWidth = $("#box").outerWidth(true);
        var divHeight = $("#box").outerHeight(true);
        $("#result").html("Vanjska širina: " + divWidth + ", " + "Vanjska visina: " + divHeight);
    });
});
</script>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Dobijanje Outer-Width i Outer-Height elemeta uključujući margine</title>
<style>
    #box{
        width: 300px;
        height: 200px;
        padding: 25px;
        text-align: justify;
        border: 10px solid #c6b51a;
        background: #f0e68c;
        margin: 15px;
    }        
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        var divWidth = $("#box").outerWidth(true);
        var divHeight = $("#box").outerHeight(true);
        $("#result").html("Vanjsa visina: " + divWidth + ", " + "Vanjsak širina: " + divHeight);
    });
});
</script>
</head>
<body>
    <div id="box">Lorem ipsum dolor sit amet, consectetur adipiscing
    elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna
    metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum
    id metus ac nisl bibendum scelerisque non non purus. Suspendisse
    varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum 
    vestibulum. Vivamus fermentum in arcu in aliquam. Quisque 
    aliquam porta odio in fringilla non purus nisld Dapibus nec turpis
    vel, semper malesuada ant.</div>

    <button type="button">Dobijanje outerWidth i outerHeight sa marginama</button>
    <p id="result"></p>
    <hr>
    <p><strong>Napomena:</strong> jQuery <b>outerWidth(true)</b> iuključuje CSS svojstva 
    (<b>width</b> + <b>padding-left</b> + <b>padding-right</b> + 
    <b>border-left</b> + <b>border-right</b> + <b>margin-left</b> + 
    <b>margin-right</b>), a <b>outerHeight(true)</b> uključuje 
    (<b>height</b> + <b>padding-top</b> + <b>padding-bottom</b> + <b>border-top</b> + 
    <b>border-bottom</b> + <b>margin-top</b> + <b>margin-bottom</b>).</p>
</body>
</html>

Takođe možete postaviti vanjsku širinu i visinu elementa prosljeđivanjem vrijednosti kao parametra metodama externalWidth() i externalHeight(). Ove metode mijenjaju samo širinu ili visinu područja sadržaja elementa kako bi se podudarale s navedenom vrijednošću, poput metoda innerWidth() i innerHeight().

Na primjer, ako je trenutna širina elementa 300px, a zbir lijevog i desnog padding-a jednak je 50px, a zbir širine lijevog i desnog bordera iznosi 20px od nove širine elementa nakon postavljanja vanjske širine na 400px iznosi 330px, tj. nova širina = vanjska širina - (horizontalan padding + horizontalan border). Slično tome, možete procijeniti promjenu visine dok postavljate vanjsku visinu.

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#box").outerWidth(400).outerHeight(300);
    });
});
</script>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Postavljanje Outer-Width i Outer-Height elementa</title>
<style>
    #box{
        width: 300px;
        height: 200px;
        padding: 25px;
        text-align: justify;
        border: 10px solid #c6b51a;
        background: #f0e68c;
        margin: 15px;
    }        
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#box").outerWidth(400).outerHeight(300);
    });
});
</script>
</head>
<body>
    <div id="box">Lorem ipsum dolor sit amet, consectetur adipiscing
    elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna
    metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum
    id metus ac nisl bibendum scelerisque non non purus. Suspendisse
    varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum
    vestibulum. Vivamus fermentum in arcu in aliquam. Quisque 
    aliquam porta odio in fringilla non purus nisld Dapibus nec turpis 
    vel, semper malesuada ant.</div>

    <button type="button">Postavi outerWidth i outerHeight elementa</button>
</body>
</html>