An HTML element can be hidden with the help of .hide() jQuery function or we can hide easily by making visibility equals hidden in CSS. We can easily find the width of this hidden element in jQuery.
There are two kinds of width that are defined with the every HTML element i.e, innerWidth and the outerWidth of the element:
- innerWidth: This width is considered when the width of the border is not considered for the selected element.
- outerWidth: This width is considered when the width of the border is considered for the selected element.
Example 1: This example shows how to calculate innerWidth of the hidden element.
HTML
<!DOCTYPE html> <html>
<head>
<script src=
</script>
<script>
$(document).ready(function () {
$("#btn1").click(function () {
var demo = $("div").innerWidth();
$("#demo").text(demo);
});
});
</script>
<style>
div {
width: 310px;
height: 80px;
font-weight: bold;
color: green;
font-size: 25px;
border: 1px solid green;
visibility: hidden;
border: 2px solid black;
padding: 10px;
}
body {
border: 1px solid black;
padding: 20px;
}
h1 {
color: green;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h3>
Get the width of the hidden
element in jQuery
</h3>
<div>
</div>
<p id="demo">
Here the width of the
hidden "div" element will appear.
</p>
<button id="btn1">Submit</button>
</center>
</body>
</html>
|
Output:
-
Before Clicking the Button:
-
After Clicking the Button: Here, border width will not be added to the result.
Example 2: This example show how to calculate outerWidth of the hidden element.
HTML
<!DOCTYPE html> <html>
<head>
<script src=
</script>
<script>
$(document).ready(function() {
$("#btn1").click(function() {
var demo = $("div").outerWidth();
$("#demo").text(demo);
});
});
</script>
<style>
div {
width: 310px;
height: 80px;
font-weight: bold;
color: green;
font-size: 25px;
border: 1px solid green;
visibility: hidden;
border: 2px solid black;
padding: 10px;
}
body {
border: 1px solid black;
padding: 20px;
}
h1 {
color: green;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h3>
Get the width of the hidden
element in jQuery
</h3>
<div>
</div>
<p id="demo">
Here the width of the
hidden "div" element will appear.
</p>
<button id="btn1">Submit</button>
</center>
</body>
</html>
|
Output:
-
Before Clicking the Button:
-
After Clicking the Button: Here, border width will be added to the result.