jQuery <div> set outer width and height size

Description

jQuery <div> set outer width and height size

View in separate window 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Set Outer-Width and Outer-Height of the Elements</title>
<style>
    #box{// w  w w.ja va 2  s .c om
        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-1.12.4.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">Set outerWidth and outerHeight</button>
</body>
</html>



PreviousNext

Related