How to return which part of a positioned element is visible in JavaScript?

JavascriptWeb DevelopmentFront End Scripts

This tutorial teaches us how to return which part of a positioned element is visible in JavaScript. Positioned element is an element in JavaScript or Html which have some defined position it could be absolute which means fixed, or any relative position.

To make the defined part visible only we are going to clip, remove, or hide the not required area by using the ‘clip’ property of the ‘style’ property of any element. We are going to define an area as a rectangle and defined its portion how much we are required to trim and how much we need to take.

Syntax

We have seen the basics of how to return which part of a positioned element is visible in JavaScript. Let’s see the syntax of it −

document.getElementById( Id_of_required_element ).style.clip = "rect(size_top size_right size_bottom size_left)";
document.write(document.getElementById(Id_of_required_element ).style.clip);

In the above syntax, first, we have got the required element using the ‘document.getElementById’ method. After that using the ‘clip’ property of ‘style’ we have defined an area or structure in form of a rectangle we need to view only and provided the part in all four directions we need.

In the next step, using the same property we get the position that we have defined in the previous step to show using the ‘rect’ property and returned or printed in the document using the document.write property.

Algorithm

We have seen the basic syntax to return which part of a positioned element is visible in JavaScript. Now, let’s move to the complete algorithm and define some basic steps to how exactly do it −

Creating the body of the HTML Code

  • First, we will define an element and fix it on one side by defining the style for it.

  • We will create a button using the button tag and define an onclick event by which it will call to the display() function.

  • The display() is defined in the script and all main part to print the required return value is present.

Declaring the Style

  • In the head or using inline code we will add some style to the current element to define its relative position to it, like where it will lie and making its position fixed.

Declaring the Script

  • We will create the display() function using the function keyword in the script.

  • The display() function will contain the code to set the value of the second element by getting it using the DOM.

  • Using the document.getElementId() method we will get the second element and by using the ‘clip’ method of the ‘style’ property we will set the portion of the current element we want to see.

  • In the end, by using the document.write() method we will return the final required value.

Example

In the above steps, we have seen the complete algorithm for the required operation, now let’s see a complete code for the implementation of the algorithm for a better understanding −

<!DOCTYPE html> <html> <head> <style> img { position: absolute; top: 100px; } </style> </head> <body> <h3> How to return which part of a positioned element is visible in JavaScript? </h3> <button type = "button" onclick = "display()" > Click Me to Clip </button> <br> <img id = "newImg" src = "https://www.tutorialspoint.com/videotutorials/images/tutor_connect_home.jpg" width = "170" height = "150" > <script> function display() { document.getElementById("newImg").style.clip = "rect(10px 90px 90px 10px)"; } </script> </body> </html>

In the above code, first, we have defined a button to call the display function on clicking by using the onclick event. After that, we defined a demo image to crop it later. For the image, we have defined the id to recognize it later.

In the head section, we have defined the position of the image and fixed its top position also. In the end, we have defined the script of the program.

In the script, we have created the display function, which will get crop the size to provided dimensions.

Note  In the above code, we have only set the dimensions of the image which is later shown in the output after clicking the button, to get the defined dimensions we have to write just a document.write() method, and it will return the new dimensions.

The exact script code will be −

<script> function display() { document.getElementById("newImg").style.clip = "rect(10px 90px 90px 10px)"; document.write(document.getElementById("newImg").style.clip); } </script>

Conclusion

In this tutorial, we have learned, how to return which part of a positioned element is visible in JavaScript. Positioned element is an element in JavaScript or Html which have some defined position it could be absolute which means fixed, or any relative position. To make the required area visible only, by using the ‘clip’ property of the ‘style’ property of any element we removed other parts.

raja
Updated on 07-Nov-2022 07:51:59

Advertisements