728x90
SMALL
You can get the horizontal size of a specific element by query width, innerWidth, outerWidth.
- width - padding inside size
- innerWidth - border inside size
- outerWidth - border size including
The following is an example of adding padding and margin to see how each value changes.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<style>
div {
border: 1px solid #444444;
}
div.a {
width: 500px;
}
div.b {
width: 500px;
padding: 10px;
}
div.c {
width: 500px;
padding: 10px;
margin: 10px;
}
</style>
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$( document ).ready( function() {
var jbWidth1 = $( 'div.a' ).width();
var jbInnerWidth1 = $( 'div.a' ).innerWidth();
var jbOuterWidth1 = $( 'div.a' ).outerWidth();
$( 'div.a' ).after( '<p>Width = ' + jbWidth1 + ', Inner Width = ' + jbInnerWidth1 + ', Outer Width = ' + jbOuterWidth1 + '</p>' );
var jbWidth2 = $( 'div.b' ).width();
var jbInnerWidth2 = $( 'div.b' ).innerWidth();
var jbOuterWidth2 = $( 'div.b' ).outerWidth();
$( 'div.b' ).after( '<p>Width = ' + jbWidth2 + ', Inner Width = ' + jbInnerWidth2 + ', Outer Width = ' + jbOuterWidth2 + '</p>' );
var jbWidth3 = $( 'div.c' ).width();
var jbInnerWidth3 = $( 'div.c' ).innerWidth();
var jbOuterWidth3 = $( 'div.c' ).outerWidth();
$( 'div.c' ).after( '<p>Width = ' + jbWidth3 + ', Inner Width = ' + jbInnerWidth3 + ', Outer Width = ' + jbOuterWidth3 + '</p>' );
} );
</script>
</head>
<body>
<div class="a">
<p>border 1px, width 500px</p>
</div>
<div class="b">
<p>border 1px, width 500px, padding 10px</p>
</div>
<div class="c">
<p>border 1px, width 500px, padding 10px, margin 10px</p>
</div>
</body>
</html>
728x90
LIST
'jQuery' 카테고리의 다른 글
| [jQuery] Method / .clone ()-Method to clone selected element (0) | 2022.07.27 |
|---|---|
| [jQuery] Select all checkboxes, create deselect all (0) | 2022.07.25 |
| [jQuery] Create a link that moves smoothly to the top (0) | 2022.07.25 |
| [jQuery] How to move object to desired position using jquery (0) | 2022.07.22 |
| [jQuery] change image with jquery (0) | 2022.07.22 |