HTML | Свойство DOM Style borderImageWidth

Опубликовано: 3 Февраля, 2022

Свойство Style borderImageWidth в HTML DOM используется для установки или возврата ширины изображения границы.

Синтаксис:

Он возвращает свойство borderImageWidth.
```
 object.style.borderImageWidth
```

Он используется для установки свойства borderImageWidth

 object.style.borderImageWidth = "число | процент | авто |
начальный | наследование "

Property Values

number: It is used to set the width as a multiple of corresponding computed value of border-width. This is the default value when set to 1.

Example 1:

<!DOCTYPE html>
<html>
      
<head>
    <title>
        DOM Style borderImageWidth Property
    </title>
      
    <style>
        .item {
            height: 70px;
            border: 10px solid transparent;
            border-image: 
url("https://media.geeksforgeeks.org/wp-content/uploads/border-2.png");
            border-image-slice: 60;
            border-image-repeat: round;
            text-align:center;
            padding-top:20px;
            font-size:40px;
            font-weight:bold;
        }
    </style>
</head>
  
<body>
    <h2>
        DOM Style borderImageWidth Property
    </h2>
      
    <p>
        Click on the button to change the 
        width of border-image
    </p>
      
    <div class = "item">
        GeeksforGeeks
    </div>
      
    <button onclick = "changeWidth()">
        Click Here!
    </button>
  
    <script>
        function changeWidth() {
            elem = document.querySelector(".item");
  
            // Setting the image width to a multiple of 3
            elem.style.borderImageWidth = "3";
        }
    </script>
</body>
  
</html>                    

Output:
Before Click on the button:

After Click on the button:

length: It is used to set the width in terms of a length unit.

Example:

<!DOCTYPE html>
<html>
      
<head>
    <title>
        DOM Style borderImageWidth Property
    </title>
      
    <style>
        .item {
            height: 70px;
            border: 10px solid transparent;
            border-image: 
url("https://media.geeksforgeeks.org/wp-content/uploads/border-2.png");
            border-image-slice: 60;
            border-image-repeat: round;
            text-align:center;
            padding-top:20px;
            font-size:40px;
            font-weight:bold;
        }
    </style>
</head>
  
<body>
    <h2>
        DOM Style borderImageWidth Property
    </h2>
      
    <p>
        Click on the button to change the 
        width of border-image
    </p>
      
    <div class = "item">
        GeeksforGeeks
    </div>
      
    <button onclick = "changeWidth()">
        Click Here!
    </button>
  
    <script>
        function changeWidth() {
            elem = document.querySelector(".item");
  
            // Setting the image width to a multiple of 3
            elem.style.borderImageWidth = "30px";
        }
    </script>
</body>
  
</html>                    

Output:
Before Click on the button:

After Click on the button:

percentage: It is used to set the width in terms of percentage. Percentage is relative to the width of the border image area for horizontal offsets and the height of the border image area for vertical offsets.

Example:

<!DOCTYPE html>
<html>
      
<head>
    <title>
        DOM Style borderImageWidth Property
    </title>
      
    <style>
        .item {
            height: 70px;
            border: 10px solid transparent;
            border-image: 
url("https://media.geeksforgeeks.org/wp-content/uploads/border-2.png");
            border-image-slice: 60;
            border-image-repeat: round;
            text-align:center;
            padding-top:20px;
            font-size:40px;
            font-weight:bold;
        }
    </style>
</head>
  
<body>
    <h2>
        DOM Style borderImageWidth Property
    </h2>
      
    <p>
        Click on the button to change the 
        width of border-image
    </p>
      
    <div class = "item">
        GeeksforGeeks
    </div>
      
    <button onclick = "changeWidth()">
        Click Here!
    </button>
  
    <script>
        function changeWidth() {
            elem = document.querySelector(".item");
  
            // Setting the image width to a multiple of 3
            elem.style.borderImageWidth = "10%";
        }
    </script>
</body>
  
</html>                    

Output:
Before Click on the button:

After Click on the button:

auto: It makes width of the border equal to the intrinsic width or height of the corresponding image slice.

Example:

<!DOCTYPE html>
<html>
      
<head>
    <title>
        DOM Style borderImageWidth Property
    </title>
      
    <style>
        .item {
            height: 70px;
            border: 10px solid transparent;
            border-image: 
url("https://media.geeksforgeeks.org/wp-content/uploads/border-2.png");
            border-image-slice: 60;
            border-image-repeat: round;
            text-align:center;
            padding-top:20px;
            font-size:40px;
            font-weight:bold;
        }
    </style>
</head>
  
<body>
    <h2>
        DOM Style borderImageWidth Property
    </h2>
      
    <p>
        Click on the button to change the 
        width of border-image
    </p>
      
    <div class = "item">
        GeeksforGeeks
    </div>
      
    <button onclick = "changeWidth()">
        Click Here!
    </button>
  
    <script>
        function changeWidth() {
            elem = document.querySelector(".item");
  
            // Setting the image width to a multiple of 3
            elem.style.borderImageWidth = "auto";
        }
    </script>
</body>
  
</html>                    

Output:
Before Click on the button:

After Click on the button:

initial: It is used to set borderImageWidth property to its default value.

Example:

<!DOCTYPE html>
<html>
      
<head>
    <title>
        DOM Style borderImageWidth Property
    </title>
      
    <style>
        .item {
            height: 70px;
            border: 10px solid transparent;
            border-image: 
url("https://media.geeksforgeeks.org/wp-content/uploads/border-2.png");
            border-image-slice: 60;
            border-image-repeat: round;
            text-align:center;
            padding-top:20px;
            font-size:40px;
            font-weight:bold;
        }
    </style>
</head>
  
<body>
    <h2>
        DOM Style borderImageWidth Property
    </h2>
      
    <p>
        Click on the button to change the 
        width of border-image
    </p>
      
    <div class = "item">
        GeeksforGeeks
    </div>
      
    <button onclick = "changeWidth()">
        Click Here!
    </button>
  
    <script>
        function changeWidth() {
            elem = document.querySelector(".item");
  
            // Setting the image width to a multiple of 3
            elem.style.borderImageWidth = "initial";
        }
    </script>
</body>
  
</html>                    

Output:
Before Click on the button:

After Click on the button:

inherit: It inherits the property from its parent.

Example:

<!DOCTYPE html>
<html>
      
<head>
    <title>
        DOM Style borderImageWidth Property
    </title>
      
    <style>
        .item {
            height: 70px;
            border: 10px solid transparent;
            border-image: 
url("https://media.geeksforgeeks.org/wp-content/uploads/border-2.png");
            border-image-slice: 60;
            border-image-repeat: round;
            text-align:center;
            padding-top:20px;
            font-size:40px;
            font-weight:bold;
        }
  
        .Geeks {
              
            /* Setting the border-width to of parent */
            border-image-width: 30px;
        }
    </style>
</head>
  
<body>
      
    <h2>
        DOM Style borderImageWidth Property
    </h2>
      
    <p>
        Click on the button to change the 
        width of border-image
    </p>
  
    <div class = "Geeks">
        <div class = "item">
            GeeksforGeeks
        </div>
    </div>
      
    <button onclick = "changeWidth()">
        Click Here!
    </button>
  
    <script>
        function changeWidth() {
            elem = document.querySelector(".item");
  
            // Setting the image width to inherit
            elem.style.borderImageWidth = "inherit";
        }
    </script>
</body>
</html>                    

Output:
Before Click on the button:

After Click on the button:

Supported Browsers: The browser supported by borderImageWidth Property are listed below:

Chrome
Internet Explorer 11
Firefox
Safari 6

Picked HTML

РЕКОМЕНДУЕМЫЕ СТАТЬИ

Количество чисел между L и R, взаимно простых с P

27 Февраля, 2023

Постройте матрицу, каждая строка и столбец которой содержат N и M единиц соответственно.

27 Февраля, 2023

Найдите все факторы заданного числа и их побитовое XOR

27 Февраля, 2023

Показать самое длинное имя

27 Февраля, 2023

Форматирование лицензионного ключа

27 Февраля, 2023

Когда я должен использовать список против LinkedList

27 Февраля, 2023

Реализовать быструю сортировку с первым элементом в качестве опорного

27 Февраля, 2023

Алгоритм хеш-сортировки

27 Февраля, 2023