如何在 JavaScript 中返回定位元素的可见部分？

本教程将教我们如何在 JavaScript 中返回定位元素的可见部分。定位元素是 JavaScript 或 Html 中具有某些定义位置的元素，它可以是绝对的，这意味着固定的，或者任何相对位置。

为了使定义的部分仅可见，我们将使用任何元素的“style”属性的“clip”属性来剪辑、移除或隐藏不需要的区域。我们将定义一个区域作为矩形，并定义其部分我们需要修剪多少以及我们需要取多少。

语法

我们已经了解了如何在 JavaScript 中返回定位元素的可见部分的基本知识。让我们看看它的语法 -

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);

在上面的语法中，首先，我们使用“document.getElementById”方法获取了所需的元素。之后，使用“style”的“clip”属性，我们定义了一个矩形形式的区域或结构，我们只需要查看它并提供了我们需要的所有四个方向的部分。

在下一步中，使用相同的属性，我们获取我们在上一步中定义的位置以使用“rect”属性显示，并使用document.write属性在文档中返回或打印。

算法

我们已经看到了在 JavaScript 中返回定位元素的可见部分的基本语法。现在，让我们转到完整的算法并定义一些基本步骤来了解如何准确地执行它 -

创建 HTML 代码的主体

  • 首先，我们将定义一个元素并通过为其定义样式将其固定在一侧。

  • 我们将使用按钮标签创建一个按钮，并定义一个 onclick 事件，通过该事件它将调用display()函数。

  • display()在脚本中定义，打印所需返回值的所有主要部分都存在。

声明样式

  • 在头部或使用内联代码，我们将向当前元素添加一些样式以定义其相对于它的相对位置，例如它将在哪里以及使其位置固定。

声明脚本

  • 我们将使用脚本中的 function 关键字创建display()函数。

  • display()函数将包含通过使用 DOM 获取它来设置第二个元素值的代码。

  • 使用document.getElementId()方法，我们将获取第二个元素，并通过使用“style”属性的“clip”方法，我们将设置我们想要看到的当前元素的部分。

  • 最后，我们将使用document.write()方法返回最终所需的值。

示例

在上述步骤中，我们已经看到了所需操作的完整算法，现在让我们看看实现算法的完整代码以更好地理解 -

<!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://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>

在上面的代码中，首先，我们定义了一个按钮，通过使用 onclick 事件在单击时调用 display 函数。之后，我们定义了一个演示图像以稍后裁剪它。对于图像，我们定义了 id 以稍后识别它。

在头部部分，我们定义了图像的位置并固定了其顶部位置。最后，我们定义了程序的脚本。

在脚本中，我们创建了 display 函数，它将裁剪尺寸到提供的尺寸。

注意− 在上面的代码中，我们只设置了稍后在单击按钮后显示在输出中的图像的尺寸，要获取定义的尺寸，我们只需要编写一个document.write()方法，它将返回新的尺寸。

确切的脚本代码将为 -

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

结论

在本教程中，我们学习了如何在 JavaScript 中返回定位元素的可见部分。定位元素是 JavaScript 或 Html 中具有某些定义位置的元素，它可以是绝对的，这意味着固定的，或者任何相对位置。为了使所需的区域仅可见，我们使用任何元素的“style”属性的“clip”属性删除了其他部分。

更新于： 2022-11-07

151 次查看

启动你的 职业生涯

通过完成课程获得认证

开始
广告