如何使用 JavaScript 設定影像邊框的寬度？

在本教程中，我們將學習如何使用 JavaScript 設定影像邊框的寬度。要設定影像邊框的寬度，請在 JavaScript 中使用 borderImageWidth 屬性。

當我們需要將影像作為網頁內容的邊框時，我們必須瞭解如何設定影像邊框的寬度。

讓我們簡要討論一下實現此目標的選項。

使用 Style borderImageWidth 屬性

使用 Style borderImageWidth 屬性，我們可以設定或返回元素的影像邊框寬度。

當影像邊框寬度大於邊框寬度時，影像邊框將超出填充。

我們可以為 borderImageWidth 屬性設定一個、兩個、三個或四個值。

  • 如果只有一個值，則應用於所有四邊。

  • 如果有兩個值，則第一個值設定“頂部和底部”，第二個值設定“左側”和“右側”。

  • 如果有三個值，則第一個值設定頂部，第二個值設定“左側”和“右側”，第三個值設定底部。

  • 如果有四個值，則頂部、右側、底部和左側按順序分別取相應的值。

語法

使用者可以按照以下語法使用此屬性：

object.style.borderImageWidth = "length|number|%|auto|initial|inherit";

使用上述語法，我們可以將所需的影像邊框寬度設定為元素的樣式。

引數

  • length − 以畫素為單位的長度單位，定義邊框寬度的尺寸。

  • number − 定義對應邊框寬度的倍數。

  • % − 定義影像邊框寬度對於水平偏移量的大小，以及對於垂直偏移量的高度。

  • auto − 寬度是相應影像的內在寬度或高度。

  • initial − 將此屬性設定為其預設值。

  • inherit − 從其父元素繼承此屬性。

給定屬性的預設值為 1。返回值是表示影像邊框寬度的字串。

示例 1

在下面的示例中，我們使用 borderImageWidth 屬性設定影像邊框的寬度。您可以嘗試執行以下程式碼，瞭解如何將邊框設定為影像：

<!DOCTYPE html>
<html>
<head>
   <style>
      div {
         background-color:gray;
         border: 40px solid;
         border-image:
         url('https://tutorialspoint.tw/images/neo4j.png');
         border-image-slice: 50;
         border-image-width: 20px;
         border-image-width: 1 1 1 1;
         border-image-outset: 0;
         border-image-repeat: round;
      }
   </style>
</head>
<body>
   <div id="box">
   <p>Demo Text!</p>
   </div>
   <button onclick="display()">Set Width</button>
   <script>
      function display(){
         document.getElementById("box").style.borderImageWidth = "20px 30px";
      }
   </script>
</body>
</html>

示例 2

在此程式中，我們將影像邊框寬度設定為 div 元素。我們從使用者那裡獲取影像邊框寬度。

當用戶點選按鈕時，我們呼叫函式根據上面給出的語法設定影像邊框寬度。

<html>
  <head>
    <style>
      #imgBrdrWdthUsrEl 
      {
        border: 15px solid transparent;
        padding: 10px;
        border-image-source: url(https://tutorialspoint.com/css/images/border.png);
        border-image-repeat: round;
        border-image-slice: 20;
        border-image-width: 20px;
      }
    </style>
    <script>
      function setImageBorderWidth() {
        var imgBrdrWdthUsrSelTag = document.getElementById("imgBrdrWdthUsrSel");
        var imgBrdrWdthUsrSelIndx = imgBrdrWdthUsrSelTag.selectedIndex;
        var imgBrdrWdthUsrSelStat = imgBrdrWdthUsrSelTag.options[imgBrdrWdthUsrSelIndx].text;
        var imgBrdrWdthUsrBtnWrap = document.getElementById("imgBrdrWdthUsrBtnWrap");
        var imgBrdrWdthUsrEl = document.getElementById("imgBrdrWdthUsrEl");
        imgBrdrWdthUsrEl.style.borderImageWidth = imgBrdrWdthUsrSelStat;
        imgBrdrWdthUsrEl.innerHTML = "You have set the image border width to <b>" + imgBrdrWdthUsrEl.style.borderImageWidth + "</b>";         
      }
    </script>
  </head>
  <body>
    <h2>Set the widths of the image border  using the <i>  borderImageWidth  </i>property.</h2>  
    <p id = "imgBrdrWdthUsrEl"> Image border. </p>
    <br>
    <div id = "imgBrdrWdthUsrBtnWrap">
    <select id = "imgBrdrWdthUsrSel">
      <option/> 5px
      <option/> 5px 10px;
      <option selected = "selected"/> 5px 10px 15px
      <option/> 5px 10px 15px 20px
      <option/> 5 10 15 20
      <option/> 1% 2% 3% 4%
      <option/> auto
      <option/> initial
      <option/> inherit
    </select>
    <br><br>    
      <p> Choose the image border width and click on the button. </p>
      <button onclick = "setImageBorderWidth();"> Change </button>
    </div>
    <br>  
  </body>
</html>

示例 3

在此示例中，我們在段落標籤上設定了不同的影像邊框寬度。當用戶點選按鈕時，我們將初始化函式來設定影像邊框寬度。

<html>
<head>
   <style>
      #imgBrdr1{
         border: 10px solid #000000;
         padding: 20px;
         border-image:
         url("https://tutorialspoint.tw/images/neo4j.png");
         border-image-slice: 10%;
         border-image-repeat: round;
         border-image-width: 0px;
         background-color: lavender;
      }
      #imgBrdr2{
         border: 10px solid #000000;
         padding: 20px;
         border-image:
         url("https://tutorialspoint.tw/images/neo4j.png");
         border-image-slice: 10%;
         border-image-repeat: round;
         border-image-width: 0;
         background-color: pink;
      }
      #imgBrdr3{
         border: 10px solid #000000;
         padding: 20px;
         border-image:
         url("https://tutorialspoint.tw/images/neo4j.png");
         border-image-slice: 10%;
         border-image-repeat: round;
         border-image-width: 0;
         background-color: lavender;
      }
      #imgBrdr4{
         border: 10px solid #000000;
         padding: 20px;
         border-image:
         url("https://tutorialspoint.tw/images/neo4j.png");
         border-image-slice: 10%;
         border-image-repeat: round;
         border-image-width: 0;
         background-color: pink;
      }
   </style>
   <script>
      function setMultImageBorderWidth(){
         var imgBrdrWdthBtnWrap =
         document.getElementById("imgBrdrWdthBtnWrap");
         var imgBrdrWdthEl1 = document.getElementById("imgBrdr1");
         imgBrdrWdthEl1.style.borderImageWidth = "7px";
         imgBrdrWdthEl1.innerHTML = "border-image-width - <b>" +
         imgBrdrWdthEl1.style.borderImageWidth + "</b>";
         var imgBrdrWdthEl2 = document.getElementById("imgBrdr2");
         imgBrdrWdthEl2.style.borderImageWidth = "8px";
         imgBrdrWdthEl2.innerHTML = "border-image-width - <b>" +
         imgBrdrWdthEl2.style.borderImageWidth + "</b>";
         var imgBrdrWdthEl3 = document.getElementById("imgBrdr3");
         imgBrdrWdthEl3.style.borderImageWidth = "9px";
         imgBrdrWdthEl3.innerHTML = "border-image-width - <b>" +
         imgBrdrWdthEl3.style.borderImageWidth + "</b>";
         var imgBrdrWdthEl4 = document.getElementById("imgBrdr4");
         imgBrdrWdthEl4.style.borderImageWidth = "10px";
         imgBrdrWdthEl4.innerHTML = "border-image-width - <b>" +
         imgBrdrWdthEl4.style.borderImageWidth + "</b>";
      }
   </script>
</head>
<body>
   <h3> Set the widths of multiple image borders using the
      <i> borderImageWidth </i>property.
   </h3>
   <p id = "imgBrdr1"> </p>
   <p id = "imgBrdr2"> </p>
   <p id = "imgBrdr3"> </p>
   <p id = "imgBrdr4"> </p>
   <div id = "imgBrdrWdthBtnWrap">
      <p> Click on the button to view different border image widths on
      the color boxes </p>
      <button onclick = "setMultImageBorderWidth();"> View </button>
   </div>
</body>
</html>

在本教程中，我們瞭解了 JavaScript 中的 borderImageWidth 屬性。此屬性是 JavaScript 中一個內建選項，用於設定影像邊框的寬度，並且非常易於編碼。

更新於： 2022-10-25

363 次瀏覽

啟動您的 職業生涯

透過完成課程獲得認證

開始學習
廣告