HTML | Estilo DOM borderImageWidth Propiedad

julio 5, 2022 Rudeus Greyrat

La propiedad Style borderImageWidth en HTML DOM se usa para establecer o devolver el ancho de la imagen del borde.

Sintaxis:

Devuelve la propiedad borderImageWidth
```
object.style.borderImageWidth
```

Se utiliza para establecer la propiedad borderImageWidth

object.style.borderImageWidth = "number|percentage|auto|
initial|inherit"

Valores devueltos: Devuelve un valor de string, que representa la propiedad border-image-width de un elemento.

Valores de propiedad

número: se utiliza para establecer el ancho como un múltiplo del valor calculado correspondiente del ancho del borde. Este es el valor predeterminado cuando se establece en 1.

Ejemplo 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>                    

Salida:
Antes Haga clic en el botón:
multiple-before
Después Haga clic en el botón:
multiple-after

longitud: Se utiliza para establecer el ancho en términos de una unidad de longitud.

Ejemplo:

<!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>                    

Salida:
Antes Haga clic en el botón:
multiple-before
Después Haga clic en el botón:
multiple-after

porcentaje: Se utiliza para establecer el ancho en términos de porcentaje. El porcentaje es relativo al ancho del área de la imagen del borde para las compensaciones horizontales y la altura del área de la imagen del borde para las compensaciones verticales.

Ejemplo:

<!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>                    

Salida:
Antes Haga clic en el botón:
multiple-before
Después Haga clic en el botón:
multiple-after

auto: hace que el ancho del borde sea igual al ancho o alto intrínseco del segmento de imagen correspondiente.

Ejemplo:

<!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>                    

Salida:
Antes Haga clic en el botón:
multiple-before
Después Haga clic en el botón:
multiple-after

initial: se utiliza para establecer la propiedad borderImageWidth en su valor predeterminado.

Ejemplo:

<!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>                    

Salida:
Antes Haga clic en el botón:
multiple-before
Después Haga clic en el botón:
multiple-after

heredar : hereda la propiedad de su padre.

Ejemplo:

<!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>                    

Salida:
Antes Haga clic en el botón:
multiple-before
Después Haga clic en el botón:
multiple-after

Navegadores compatibles: los navegadores compatibles con la propiedad borderImageWidth se enumeran a continuación:

Cromo
explorador de Internet 11
Firefox
Safari 6

Publicación traducida automáticamente

Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta