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
Counts how many times a substring occurs in a string in PHP
Use the PHP substr_count() fun...Method Tymon\JWTAuth\Commands\JWTGenerateCommand::handle() does not exist
Today, we are install laravel 5.5 and in...Failed to clear cache. Make sure you have the appropriate permissions in Laravel
Hi, Hello Laravel artisan. this is...How to get Last Record From leftJoin Table in Laravel?
get the latest record from leftJoin tabl...How to Check for an Empty String in JavaScript
Use the === Operator You can use the...