HTML | Propiedad de dirección de estilo DOM

La propiedad Dirección de estilo en HTML DOM se usa para establecer o devolver la dirección del texto de un elemento. 

Sintaxis:

  • Se utiliza para establecer la dirección del texto.
object.style.direction = "ltr|rtl|initial|inherit"
  • Devuelve la dirección del texto.
object.style.direction

Valores de propiedad:

  • ltr: especifica la dirección de izquierda a derecha, que también es la dirección predeterminada.
  • rtl: especifica la dirección de derecha a izquierda.
  • initial: establece la propiedad en su valor predeterminado.
  • heredar: hereda la propiedad del elemento padre.

Valor devuelto: Devuelve la dirección del texto del contenido del texto. 

Ejemplo 1: este ejemplo establece la dirección del texto de derecha a izquierda

html

<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML DOM Style direction Property
    </title>
</head>
 
<body>
    <div>
         
        <!-- Style direction Property used here -->
        <p id = "para">
            Welcome to GeeksforGeeks
        </p>
    </div>
     
    <input type = "button" value = "Click Here!"
    onclick = "myGeeks()" />
 
    <!-- script to set text direction -->
    <script>
        function myGeeks() {
            document.getElementById("para").style.direction
                                                   = "rtl";
        }
    </script>
</body>
 
</html>                   

Producción: 

Antes de hacer clic en el botón:

  

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

  

Ejemplo 2: este ejemplo devuelve la dirección del contenido del texto. 

html

<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML DOM Style direction Property
    </title>
</head>
 
<body>
    <div>
        <p id = "para" style = "direction: rtl">
            Welcome to GeeksforGeeks
        </p>
    </div>
 
    <input type = "button" value = "Click Here!"
        onclick = "myGeeks()" />
     
    <!-- script returns the content direction -->
    <script>
        function myGeeks() {
            alert(document.getElementById("para").style.direction);
        }
    </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 Dirección de estilo se enumeran a continuación:

  • Google Chrome 2 y superior
  • Borde 12 y superior
  • Internet Explorer 5.5 y superior
  • Firefox 1 y superior
  • Ópera 9.2 y superior
  • Safari 1 y superior

Publicación traducida automáticamente

Artículo escrito por kundankumarjha 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 *