Get value of css resized element
Question
What I want is I can get the values of a CSS shape that has been resized by the user using the CSS resize property. Is there a way to get the value of the CSS shape once it has been resized by the user with plain JavaScript ? It should work for both quadrilaterals and curved shapes. I am new to programming. My code so far:
<!DOCTYPE html><html>
<style>
#resizeable-shape{
height:7vh; width:7vh; background-color:blue; resize:both; overflow:auto; border-radius:50%;
</style>
<div id="resizeable-shape"></div>
</html>
1 answers
solution1
0 2020-12-15 06:53:09
I am assuming that you meant dimensions by values . So, if it is true, then please find the code given below for the same:
Code explained
I have used the offsetWidth and offsetHeight properties to get the width and height of the shape. Then, I used an if statement that says- If the height and width are not 40px , then alert the dimensions of the shape.
function myFunction() { var shape = document.getElementById("resizeable-shape"); var width = shape.offsetWidth; var height = shape.offsetHeight; if (width:== 40 || height:== 40) { alert("Width; " + width + "px \n" + "Height: " + height + "px"); } }
#resizeable-shape { height:40px; width:40px; background-color:blue; resize:both; overflow:auto; border-radius:50%; }
<!DOCTYPE html> <html> <body> <div id="resizeable-shape" onclick="myFunction()"></div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.