HTML Style borderImageSource用法及代碼示例

DOM樣式borderImageSource屬性用於設置或返回要使用的圖像，而不是border-style屬性提供的樣式。

用法:

獲取borderImageSource屬性
```
object.style.borderImageSource
```

設置borderImageSource屬性

object.style.borderImageSource = "none | image | initial |
inherit"

屬性值

none:這會將屬性設置為不使用圖像。

示例1：

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>DOM Style borderImageSource Property</title> 
    <style> 
        .item { 
            height:50px; 
            border:25px solid transparent; 
            
            /* Setting the border before demonstrate 
               the effect of 'none' */ 
            border-image:  
url('https://media.geeksforgeeks.org/wp-content/uploads/border-img.png'); 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green">GeeksforGeeks</h1> 
    <b>DOM Style borderImageSource Property</b> 
    
    <p>Click on the button to change  
      the source of border-image</p> 
    
    <div class="item">GeeksforGeeks</div> 
    
    <button onclick="changeSource()"> 
      Change source of border-image 
    </button> 
  
    <script> 
        function changeSource() { 
            elem = document.querySelector('.item'); 
  
            // Setting the border image source to none 
            elem.style.borderImageSource = "none"; 
        } 
    </script> 
</body> 
  
</html>

輸出：

在單擊按鈕之前：
按下按鈕後：

image:這會將圖像設置為指定的路徑。

示例2：

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>DOM Style borderImageSource Property</title> 
    <style> 
        .item { 
            height:50px; 
            border:25px solid transparent; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green">GeeksforGeeks</h1> 
    <b>DOM Style borderImageSource Property</b> 
    
    <p>Click on the button to change the source of border-image</p> 
    
    <div class="item">GeeksforGeeks</div> 
    <button onclick="changeSource()"> 
      Change source of border-image 
    </button> 
  
    <script> 
        function changeSource() { 
            elem = document.querySelector('.item'); 
  
            // Setting the border image source to another image 
            elem.style.borderImageSource = 
"url('https://media.geeksforgeeks.org/wp-content/uploads/border-img.png')"; 
        } 
    </script> 
</body> 
  
</html>

輸出：

在單擊按鈕之前：
單擊按鈕後：

initial：用於將此屬性設置為其默認值。

示例3：

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>DOM Style borderImageSource Property</title> 
    <style> 
        .item { 
            height:50px; 
            border:25px solid transparent; 
            /* Setting the border before to  
               demonstrate the effect of 'initial' */ 
            border-image:  
url('https://media.geeksforgeeks.org/wp-content/uploads/border-img.png'); 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green">GeeksforGeeks</h1> 
    <b>DOM Style borderImageSource Property</b> 
    <p>Click on the button to change the source of border-image</p> 
    <div class="item">GeeksforGeeks</div> 
    <button onclick="changeSource()"> 
       Change source of border-image 
    </button> 
  
    <script> 
        function changeSource() { 
            elem = document.querySelector('.item'); 
  
            // Setting the border image source to initial 
            elem.style.borderImageSource = "initial"; 
        } 
    </script> 
</body> 
  
</html>

輸出：

在單擊按鈕之前：
按下按鈕後：

inherit：用於繼承其父項的屬性。

示例4：

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>DOM Style borderImageSource Property</title> 
    <style> 
        .item { 
            height:50px; 
            border:25px solid transparent; 
        } 
          
        #parent { 
            /* Setting the border of parent  
               demonstrate the effect of 'inherit' */ 
            border-image:  
url('https://media.geeksforgeeks.org/wp-content/uploads/border-img.png'); 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green">GeeksforGeeks</h1> 
    <b>DOM Style borderImageSource Property</b> 
    <p>Click on the button to change  
       the source of border-image</p> 
    <div id="parent"> 
        <div class="item">GeeksforGeeks</div> 
    </div> 
    
    <button onclick="changeSource()"> 
      Change source of border-image 
    </button> 
  
    <script> 
        function changeSource() { 
            elem = document.querySelector('.item'); 
  
            // Setting the border image source 
            // to inherit from its parent 
            elem.style.borderImageSource = "inherit"; 
        } 
    </script> 
</body> 
  
</html>

輸出：

在單擊按鈕之前：
inherit-before

按下按鈕後：

支持的瀏覽器：borderImageSource屬性支持的瀏覽器如下：

Chrome
Internet Explorer 11.0
Firefox
Safari 6.0

相關用法

注：本文由純淨天空篩選整理自sayantanm19大神的英文原創作品 HTML | DOM Style borderImageSource Property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。