CSS Property: resize
[this page | pdf | back links]
The CSS (CSS3) resize property indicates whether an
element can be resized by the user. Some major browsers do not support this
property.
Valid property values
(other than inherit
and initial) are:
|
Value
|
Description
|
|
both
|
User can resize height
and width of element
|
|
horizontal
|
User can resize width
of element
|
|
none
|
(default value). User
cannot resize element
|
|
vertical
|
User can resize height
of element
|
|
Default Value:
|
none
|
|
JavaScript syntax:
|
e.g. object.style.resize="horizontal"
|
|
Inherited:
|
No
|
|
Animatable:
|
No
|
EXAMPLE:
HTML USED IN THIS EXAMPLE:
<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
<head>
<style>
div.x1 {border: thin solid green; padding: 10px; width: 200px; overflow: auto;}
div.x2 {border: thin solid green; padding: 10px; width: 200px; overflow: auto;
resize: both;}
</style>
</head>
<body>
<div class="x1">Element with default property</div><br>
<div class="x2">Element with property set by HTML</div><br>
<div id="x3">Element with property set by JavaScript</div>
<script>
var x = document.getElementById("x3");
x.style = "border: thin solid green; padding: 10px; width: 200px; overflow: auto;";
x.style.resize= "both";
</script>
</body>
</html>
|
FUNCTION THAT MAY ASSIST IN TESTING WHETHER FEATURE IS SUPPORTED:
function isSupportedCSSPropertyResize() {
var x = document.createElement("DIV"); x.style.resize = "both"; return (window.getComputedStyle(x, null).resize == "both");
} |
NAVIGATION LINKS
Contents | Prev | Next | CSS Properties