HTML | Propiedad DOM designMode

La propiedad DOM designMode en HTML se usa para especificar si el documento es editable o no. También se puede utilizar para configurar el documento como editable. 

Sintaxis:

  • Establecer: Esta propiedad se utiliza para establecer que el documento sea editable o no.
document.designMode = "on|off";
  • Obtener: Esta propiedad se utiliza para devolver el documento si es editable o no.
document.designMode

Valor de propiedad: esta propiedad contiene dos valores que se enumeran a continuación:

  • off: Es el valor por defecto. En este modo el documento no es editable.
  • on: En este modo el documento es editable.

Ejemplo 1: 

html

<!DOCTYPE html>
<html>
    <head>
        <title>
            DOM designMode Property
        </title>
    </head>
     
    <body style = "text-align: center; ">
         
        <h1 style = "color: green">
            GeeksforGeeks
        </h1>
         
        <h2>DOM designMode Property</h2>
        <p>This document is editable!</p>
         
        <!-- script to set designMode property
        editable -->
        <script>
            document.designMode = "on";
        </script>
    </body>
</html>                   

Producción: 

Antes de editar el párrafo:

 designmode 

Después de editar el párrafo:

 designmode2 

Ejemplo 2: 

html

<!DOCTYPE html>
<html>
    <head>
        <title>
            DOM designMode Property
        </title>
    </head>
     
    <body style = "text-align: center;">
         
        <h1 style = "color: green">
            GeeksforGeeks
        </h1>
         
        <h2>DOM designMode Property</h2>
         
        <button onclick="myFunction()">
            Get the designMode
        </button>
         
        <p id = "geeks"></p>
         
        <!-- script to display designMode -->
        <script>
            function myFunction() {
                var x = document.designMode;
                document.getElementById("geeks").innerHTML = x;
            }
        </script>
    </body>
</html>                   

Producción: 

Antes de hacer clic en el botón:

 designmode 

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

 designmode2 

Navegadores compatibles: los navegadores compatibles con el método designMode se enumeran a continuación:

  • Google cromo 1
  • Borde 12
  • explorador de Internet 4
  • Firefox 1
  • Ópera 9
  • Safari 1.2

Publicación traducida automáticamente

Artículo escrito por Vishal Chaudhary 2 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 *