如何使用 JavaScript 设置元素是否可由用户调整大小？

在本教程中，我们将学习如何使用 JavaScript 设置元素是否可由用户调整大小。使用 resize 属性来设置元素是否可由用户调整大小。

网页上的元素在其位置和大小上是固定的。但是，有时您需要允许用户增加元素的大小或更改其位置。CSS 的 resize 属性为我们提供了一种更改元素大小的方法。JavaScript DOM 几乎提供了 CSS 提供的所有样式属性。我们甚至可以使用 JavaScript DOM 将元素设置为可调整大小。

因此，让我们看看如何使用 JavaScript 设置元素是否可由用户调整大小。

使用 Style resize 属性设置元素可调整大小

不同的网站为用户提供不同的服务。一些网页处理形状和线条。resize 属性用于设置元素是否可由用户调整大小。您可能已经注意到 Textarea 默认情况下是可调整大小的。我们可以通过将 resize 属性设置为 none 来使其不可调整大小。

所有用户都可以按照以下语法使用 resize 属性来设置元素可调整大小

语法

var div= document.getElementById(" <id here> ");
div.style.resize = "none || both || horizontal || vertical || initial || inherit"

参数

  • none − 默认值。元素不可调整大小。
  • vertical − 元素只能在垂直方向上调整大小。
  • horizontal − 元素只能在水平方向上调整大小。
  • both − 元素可以在垂直和水平方向上调整大小。
  • initial − 设置为默认值。
  • inherit − 从其父元素继承属性。

示例 1

您可以尝试运行以下代码，以使用 JavaScript 设置元素是否可由用户调整大小：

<!DOCTYPE html>
<html>
<head>
   <style>
      #box {
         width: 350px;
         overflow: auto;
         background-color: orange;
         border: 3px solid red;
      }
   </style>
</head>
<body>
   <p>Click to set the right position. </p>
   <button type = "button" onclick = "display()"> Set Right Position
   </button>
   <div id = "box">
      <p>This is a div. This is a div. This is a div. This is a div.<p>
      <p>This is a div. This is a div. This is a div. This is a div.<p>
      <p>This is a div. This is a div. This is a div. This is a div.<p>
   </div>
   <br>
   <br>
   <script>
      function display() {
         document.getElementById("box").style.resize = "both";
      }
   </script>
</body>
</html>

示例 2

在本例中，我们使用了 resize 属性使 div 元素可调整大小。我们在 div 元素上添加了一个 onclick 方法。单击 div 后，div 将设置为可调整大小。您必须拖动容器的角来更改其大小，然后再次单击它将使其不可调整大小。

<html>
<head>
   <style>
      #container{
         overflow: auto;
         border: 1px dashed blue;
         width: 350px;
         height: 20%;
      }
   </style>
</head>
<body id = "body">
   <h3> Click within the box to set whether or not the element is resizable
   by the user.</h3>
   <div onclick = "func()" id = "container">
      This is a container
   </div>
   <script>
      function func(){
         var div=document.getElementById("container");
         if(div.style.resize=="" || div.style.resize=="none"){
         div.style.resize = "both";
         } else {
            div.style.resize = "none";
         }
      }
   </script>
</body>
</html>

在上面的示例中，用户可以看到我们使用了 resize 属性来使用 JavaScript 设置元素是否可由用户调整大小。

示例 3

在下面的示例中，我们添加了一个下拉菜单和值来调整元素的大小。单击按钮后，我们将执行一个函数，该函数将使用从下拉菜单中选择的值设置 resize 属性。

<html>
<head>
   <style>
      #div{
         border: 1px solid green;
      }
   </style>
</head>
<body id = "body">
   <h2> Use <i> resize property </i> to set whether or not an element is
   resizable by the user </h2>
   <div id ="div">
      <label> Select Resize value</label>
      <select id = "resize_select">
         <option value = "none"> none
         </option>
         <option value = "both"> both
         </option>
         <option value = "horizontal"> horizontal
         </option>
         <option value = "vertical"> vertical
         </option>
      </select> <br>
      <button id = "btn"> Submit </button>
   </div>
      <script>
         document.getElementById("btn").addEventListener("click", func);
         var div = document.getElementById("div");
         div.style.overflow = "auto";
         div.style.width = "30%";
         div.style.height = "20%";
         div.style.textAlign = "center";
         function func(){
            var selectValue = document.querySelector('#resize_select');
            var selected = selectValue.value;
            div.style.resize = selected;
         }
      </script>
</body>
</html>

在上面的示例中，用户可以看到我们已将 div 元素设置为可调整大小。我们更改了 div 元素的水平宽度。

在本教程中，我们学习了如何使用 JavaScript 设置元素是否可由用户调整大小。

更新于：2022年10月26日

367 次浏览

启动您的 职业生涯

通过完成课程获得认证

开始
广告