width()
methodYou can set the width of a <div>
box dynamically using the jQuery width()
method.
The width()
method simply returns the element's width as unit-less pixel value. However calling the width(value)
method sets the width of the element, where the value can be either a string (e.g. 100%, 50px, 25em, auto etc.) or a number. If only a number is provided for the value, jQuery assumes it as a pixel unit. Let's check out an example to understand how it works:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Set a DIV width</title>
<style>
.box{
float: left;
background: #f2f2f2;
border: 1px solid #ccc;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$(".set-width-btn").click(function(){
var newWidth = $(".input-width").val();
$(".box").width(newWidth);
});
});
</script>
</head>
<body>
<form>
<input type="text" class="input-width">
<button type="button" class="set-width-btn">Set Width</button>
<p>Enter the value in input box either as number (e.g. 100, 200) or combination of number and unit (e.g. 100%, 200px, 50em, auto) and click the "Set Width" button.</p>
</form>
<br>
<div class="box">This is simple DIV box</div>
</body>
</html>
Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on harsukh21@gmail.com
How to fire event on file select in jQuery
Use the jQuery change() method You ca...How to create jQuery slide up and down toggle effect
Use the jQuery slideUp() and&n...How to create custom checkboxes in HTML using CSS and jQuery
Use the CSS :checked Pseudo-class with j...Django 3 Authentication with MySql | Login Logout
In this tutorial, you'll learn how t...How to check if record exists or not in Laravel
In this article, I will show you how you...