EN
JavaScript - make element resizable (using style property)
0 points
In this article, we would like to show you how to make an existing element resizable using JavaScript.
Quick solution:
xxxxxxxxxx1
var element = document.querySelector('#element');2
element.style.overflow = 'auto';3
element.style.resize = 'both'; // or 'horizontal' or 'vertical'
In this example, we set resize CSS property value to both using JavaScript, so we can resize the element both vertically and horizontally.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
body { height: 200px; }7
8
#element { height: 100px; width: 100px; background: #b5edc2; }9
10
</style>11
</head>12
<body>13
<div id="element"></div>14
<script>15
16
var element = document.querySelector('#element');17
18
// makes element resizable:19
element.style.resize = 'both';20
element.style.overflow = 'auto';21
22
</script>23
</body>24
</html>In this example, we set resize CSS property value to horizontal using JavaScript, so we can resize the element horizontally.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
#element { height: 100px; width: 100px; background: #b5edc2; }7
8
</style>9
</head>10
<body>11
<div id="element"></div>12
<script>13
14
var element = document.querySelector('#element');15
16
// makes element resizable horizontally:17
element.style.resize = 'horizontal';18
element.style.overflow = 'auto';19
20
</script>21
</body>22
</html>In this example, we set resize CSS property value to vertical using JavaScript, so we can resize the element vertically.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
body { height: 200px; }7
8
#element { height: 100px; width: 100px; background: #b5edc2; }9
10
</style>11
</head>12
<body>13
<div id="element"></div>14
<script>15
16
var element = document.querySelector('#element');17
18
// makes element resizable vertically:19
element.style.resize = 'vertical';20
element.style.overflow = 'auto';21
22
</script>23
</body>24
</html>