
M4Q Position ans size
Manipulate element position and size.
height()
Get the current computed height for the first element in the set of matched elements or set the height of every matched element.
<div id="div" style="height: 100px;">This a example text</div>
console.log( $("#div").height() ); // Outputs: 100
$("#div").height(200); // Set div height to 200px;
$("#div").height("100%"); // Set div height to 100%;
$("#div").height("4rem"); // Set div height to 64px (if 1rem == 16px);
width()
Get the current computed width for the first element in the set of matched elements or set the width of every matched element.
<div id="div" style="width: 100px;">This a example text</div>
console.log( $("#div").width() ); // Outputs: 100
$("#div").width(200); // Set div width to 200px;
$("#div").width("100%"); // Set div width to 100%;
$("#div").width("4rem"); // Set div width to 64px (if 1rem == 16px);
outerHeight()
Get the current computed outer height (including padding, border, and optionally margin) for the first element in the set of matched elements or set the outer height of every matched element. To include margin in height calc, you must pass true to function as first argument.
<div id="div" style="width: 100px; height: 100px; margin: 10px;">
This a example text
</div>
console.log( $("#div").outerHeight() ); // Outputs: 100
console.log( $("#div").outerHeight(true) ); // Outputs: 120
$("#div").outerHeight(200); // set height to 200px;
$("#div").outerHeight("100%"); // set height to 100%;
$("#div").outerHeight("4rem"); // set height to 64px, if 1rem eq 16px;
outerWidth()
Get the current computed outer width (including padding, border, and optionally margin) for the first element in the set of matched elements or set the outer width of every matched element. To include margin in width calc, you must pass true to function as first argument.
<div id="div" style="width: 100px; height: 100px; margin: 10px;">
This a example text
</div>
console.log( $("#div").outerWidth() ); // Outputs: 100
console.log( $("#div").outerWidth(true) ); // Outputs: 120
$("#div").outerWidth(200); // set width to 200px;
$("#div").outerWidth("100%"); // set width to 100%;
$("#div").outerWidth("4rem"); // set width to 64px, if 1rem eq 16px;
padding()
Get the current computed padding for the first element. Element must be visible. Returned value contains integer values for side padding.
<div id="div" style="padding: 10px 20px;">
This a example text
</div>
console.log($('#div').padding()); // Outputs: {left: 20, right: 20, top: 10, bottom: 10}
console.log($('#div').padding('before')); // Outputs: return padding for pseudo element
console.log($('#div').padding('after')); // Outputs: return padding for pseudo element
margin()
Get the current computed margin for the first element. Element must be visible. Returned value contains integer values for side padding.
<div id="div" style="margin: 10px 20px;">
This a example text
</div>
console.log($('#div').margin()); // Outputs: {left: 20, right: 20, top: 10, bottom: 10}
console.log($('#div').margin('before')); // Outputs: return padding for pseudo element
console.log($('#div').margin('after')); // Outputs: return padding for pseudo element
border()
Get the current computed border width for the first element. Element must be visible. Returned value contains integer values for side padding.
<div id="div" style="border: 4px solid red;">
This a example text
</div>
console.log($('#div').border()); // Outputs: {left: 4, right: 4, top: 4, bottom: 4}
console.log($('#div').border('before')); // Outputs: return padding for pseudo element
console.log($('#div').border('after')); // Outputs: return padding for pseudo element