如何在 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 代码的主体

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

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

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

声明样式

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

声明脚本

  • 我们将使用脚本中的 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 以便稍后识别它。

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

在脚本中，我们创建了 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月7日

浏览量：151

启动你的职业生涯

完成课程获得认证

开始学习
广告