How to use width (value) Method and width () using function method in JQuery
In this article, I will explain use of width (value) Method and how to use width () method using function in JQuery.
Introduction
Width () method set set and return the height of selected elements.
JQuery CSS Width (val) method
Width (val) method sets the CSS Width of element.
- value set the Width in px, em, %, etc. Default unit is px
Syntax
$(selector).Width (value)
|
Example
The following example shows how to Width (val) method in jquery.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("button").click(function () {
$("p").width(250);
});
});
</script>
</head>
<body>
<p>width(val) Method Example</p>
<p style="background-color:gray;">First paragraph.</p>
<p style="background-color:red">Second paragraph.</p>
<button>Click for set the width</button>
</body>
</html>
|
Output
JQuery CSS Width () using function method
Width (fun) use a function to set the height of elements.
Syntax
$(selector).Width (function(index,oldWidth))
|
Example
The following example shows how to Width () using function method in jquery.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("button").click(function () {
$("p").width(function (n, c) {
return c - 100;
});
});
});
</script>
</head>
<body>
<p style="background-color:red">width(val) using function Method Example</p>
<button>Click for decrease the width with 100 px.</button>
</body>
</html>
|
Output
Further Readings
You may also want to read these related articles here
Ask Your Question
Got a programming related question? You may want to post your question here
Programming Answers here