Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to return which part of a positioned element is visible in JavaScript?
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.
117 Views
