HTML | Estilo DOM propiedad de estilo de esquema

La propiedad Style outlineStyle en HTML DOM se usa para establecer o devolver el estilo del contorno alrededor de un elemento.
Sintaxis:

  • Se utiliza para devolver la propiedad outlineStyle.
    object.style.outlineStyle
  • Se utiliza para establecer la propiedad outlineStyle.
    object.style.outlineStyle = value

    :

  • Valores de propiedad:

  • ninguno: este es el valor predeterminado que no establece ningún contorno.
  • oculto: con este valor, el contorno se apaga.
  • dotted: este valor establece un contorno punteado.
  • punteado: este valor establece un contorno discontinuo.
  • sólido; Este valor establece un contorno sólido.
  • doble; Este valor establece un doble contorno.
  • ranura; Este valor establece un contorno ranurado en 3D.
  • cresta; Este valor establece un contorno estriado en 3D.
  • recuadro; Este valor establece un contorno de inserción 3D.
  • comienzo; Este valor establece un contorno inicial 3D.
  • inicial; Este valor establece la propiedad de contorno en el valor predeterminado de su navegador.
  • heredar: este valor establece la propiedad de contorno en el valor de su elemento principal.
  • Valor devuelto: este método devuelve un valor de string que representa el estilo del contorno de un elemento.

    Ejemplo 1:

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            HTML | DOM Style outlineStyle Property
        </title>
        <style>
            #myDiv {
                border: 1px solid red;
                outline: green dotted thick;
            }
        </style>
    </head>
      
    <body>
        <h1> Geeks for Geeks</h1>
        <h2>HTML | DOM Style outlineStyle Property</h2>
      
        <div id="myDiv">Welcome to Geeks for Geeks.</div>
        <br>
        <button type="button" onclick="myFunction()">
            Click Here!
        </button>
      
        <script>
            function myFunction() {
                document.getElementById("myDiv")
                    .style.outlineStyle = "solid";
            }
        </script>
      
    </body>
      
    </html>
    

    Producción:

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

    Ejemplo 2:

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            HTML | DOM Style outlineStyle Property
        </title>
        <style>
            #myDiv {
                border: 1px solid red;
            }
        </style>
    </head>
      
    <body>
      
        <h1> HTML | DOM Style outlineStyle Property</h1>
      
        <div id="myDiv">Welcome to Geeks for Geeks.</div>
        <br>
        <button type="button" onclick="myFunction()">
            Click Here!
        </button>
      
        <script>
            function myFunction() {
                document.getElementById("myDiv")
                    .style.outlineStyle = "dotted";
            }
        </script>
      
    </body>
      
    </html>
    

    Producción:

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

    Navegadores compatibles: los navegadores compatibles con la propiedad DOM Style outlineStyle se enumeran a continuación:

    • Google Chrome
    • explorador de Internet
    • Firefox
    • Ópera
    • Safari

    Publicación traducida automáticamente

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

    Deja una respuesta

    Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *