HTML | Página de estilo DOMBreakBefore Propiedad

La propiedad pageBreakBefore en HTML DOM se usa para establecer o devolver las características de salto de página antes del elemento especificado en el documento HTML. Esta propiedad funciona en modo de vista previa de impresión y de impresión. La propiedad pageBreakBefore no tiene efecto en los elementos absolutamente posicionados en el HTML DOM. El salto de página antes del atributo solo se puede efectuar en el modo de vista previa de impresión y en la copia impresa.

Sintaxis:

  • Devuelve la propiedad pageBreakBefore.
    object.style.pageBreakBefore
  • Se utiliza para establecer la propiedad pageBreakBefore.
    object.style.pageBreakBefore = "auto|always|avoid|emptystring|left
                 |right|initial|inherit"

Valores de propiedad:

  • auto: Es el valor por defecto. Se utiliza para romper la página antes del elemento si es necesario.
  • siempre: este valor siempre inserta un salto de página antes del elemento.
  • evitar: este valor evita el salto de página antes del elemento
  • string vacía: este valor se usa cuando el salto de página no se inserta antes del elemento.
  • izquierda: se utiliza para insertar uno o dos saltos de página antes del elemento, por lo que la página siguiente se considera una página izquierda.
  • derecha: se utiliza para insertar uno o dos saltos de página antes del elemento, por lo que la página siguiente se considera una página derecha.
  • initial: la propiedad pageBreakBefore se utiliza para establecer su valor predeterminado.
  • heredar: se hereda de su elemento padre.

Valor de retorno: Devuelve una string que representa la propiedad de salto de página antes del elemento especificado durante la impresión.

Ejemplo 1:

<!DOCTYPE html> 
<html> 
    <head> 
        <title>
            DOM Style pageBreakBefore Property 
        </title> 
    </head> 
      
    <body> 
        <h1>GeeksforGeeks</h1>
              
        <h2 id = "footer">
            DOM Style pageBreakBefore Property 
        </h2>
          
        <button type = "button" onclick = "geeks()"> 
                PageBreak 
            </button> 
              
        <script> 
            function geeks() { 
            document.getElementById("footer").style.pageBreakBefore
                    = "always";
                                                      
            } 
        </script> 
    </body> 
</html>                    

Salida:
Vista previa de impresión antes de hacer clic en el botón:

Vista previa de impresión después de hacer clic en el botón:

Ejemplo 2: Para evitar el salto de página antes del elemento.

<!DOCTYPE html> 
<html> 
    <head> 
        <title>
            DOM Style pageBreakBefore Property 
        </title> 
    </head> 
      
    <body> 
        <h1>GeeksforGeeks</h1>
              
        <h2 id = "footer">
            DOM Style pageBreakBefore Property 
        </h2>
          
        <button type = "button" onclick = "geeks()"> 
                PageBreak 
            </button> 
              
        <script> 
            function geeks() { 
            document.getElementById("footer").style.pageBreakBefore
                    = "avoid";
                                                      
            } 
        </script> 
    </body> 
</html>                    

Salida:
Vista previa de impresión antes de hacer clic en el botón:

Vista previa de impresión después de hacer clic en el botón:

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

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

Publicación traducida automáticamente

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