如何使用 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 次瀏覽

啟動您的 職業生涯

透過完成課程獲得認證

開始
廣告