Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
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. A positioned element is an HTML element with CSS positioning (absolute, relative, fixed, etc.).
To make only a defined part visible, we use the CSS clip property to hide unwanted areas. The clip property defines a rectangular clipping region that determines which portion of an absolutely positioned element should be visible.
Syntax
Here's the basic syntax for clipping an element and retrieving the clip value:
document.getElementById("elementId").style.clip = "rect(top right bottom left)";
let clipValue = document.getElementById("elementId").style.clip;
The rect() function takes four values representing the clipping rectangle's boundaries:
- top: Distance from top edge
- right: Distance from left edge to right boundary
- bottom: Distance from top edge to bottom boundary
- left: Distance from left edge
Important Notes
Deprecation Warning: The clip property is deprecated. Modern browsers recommend using clip-path instead.
Requirements: The clip property only works on absolutely positioned elements (position: absolute or position: fixed).
Example: Image Clipping
Here's a complete example that demonstrates clipping an image and retrieving the clip dimensions:
<!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="/videotutorials/images/tutor_connect_home.jpg" width="170" height="150">
<script>
function display() {
// Apply clipping to show only a portion of the image
document.getElementById("newImg").style.clip = "rect(10px 90px 90px 10px)";
// Get and display the clip value
let clipValue = document.getElementById("newImg").style.clip;
console.log("Clip value:", clipValue);
// Display in the document
document.write("Clipped area: " + clipValue);
}
</script>
</body>
</html>
Modern Alternative: Using clip-path
For modern applications, use clip-path instead of the deprecated clip property:
<!DOCTYPE html>
<html>
<head>
<style>
#modernImg {
width: 170px;
height: 150px;
}
</style>
</head>
<body>
<h3>Modern Approach with clip-path</h3>
<button onclick="modernClip()">Apply Modern Clipping</button><br>
<img id="modernImg" src="/videotutorials/images/tutor_connect_home.jpg">
<script>
function modernClip() {
let img = document.getElementById("modernImg");
// Apply modern clipping
img.style.clipPath = "inset(10px 80px 60px 10px)";
// Get the clip-path value
let clipValue = img.style.clipPath;
console.log("Clip-path value:", clipValue);
document.write("Modern clip value: " + clipValue);
}
</script>
</body>
</html>
How the clip Property Works
The clip: rect(10px 90px 90px 10px) creates a clipping rectangle where:
- Top edge is 10px from the element's top
- Right edge is 90px from the element's left
- Bottom edge is 90px from the element's top
- Left edge is 10px from the element's left
Only the content within this rectangle remains visible; everything outside is clipped away.
Conclusion
While the clip property allows you to control which parts of positioned elements are visible, it's deprecated in favor of clip-path. Use clip-path for new projects as it offers better browser support and more flexible clipping options.
270 Views
