HTML | Estilo DOM propiedad borderImageSource

La propiedad DOM Style borderImageSource se usa para establecer o devolver la imagen que se usará en lugar de los estilos proporcionados por la propiedad border-style.

Sintaxis:

Para obtener la propiedad borderImageSource
```
object.style.borderImageSource
```

Para establecer la propiedad borderImageSource

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

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

Valores de propiedad

none: Es un valor por defecto. Esto establece la propiedad para no usar ninguna imagen.

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

Producción:

Antes de hacer clic en el botón:
Después de presionar el botón:

imagen: Esto establece la imagen en la ruta especificada.

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

Producción:

Antes de hacer clic en el botón:
Después de hacer clic en el botón:

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

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

Producción:

Antes de hacer clic en el botón:
Después de presionar el botón:

heredar : Esto se usa para heredar la propiedad de su padre.

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

Producción:

Antes de hacer clic en el botón:
inherit-before

Después de presionar el botón:

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

Cromo
Internet Explorer 11.0
Firefox
Safari 6.0

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