Tecnología

Inicio

Cómo controlar los márgenes en un JavaScript

December 1

Cómo controlar los márgenes en un JavaScript


desarrolladores de sitios web pueden acceder al marco oculto de una página Web mediante el aprovechamiento de Document Object Model de JavaScript o DOM. La métodos JavaScript getElemenById () y getElementsByClassName () permiten al programador para inspeccionar, modificar y añadir información de estilo en HTML. Los márgenes de etiquetas HTML, como "div" o "p", se pueden ver o modificar mediante el acceso al margen de las propiedades de estilo, marginTop, marginBottom, marginLeft y marginRight. etiquetas HTML deben estar etiquetados con un identificador antes de que el método getElemenById () puede encontrarlos y cambiar sus propiedades.

Instrucciones

1 Lance un estándar, editor de texto, como el Bloc de notas de Windows.

2 Introduzca el código siguiente en el editor de texto. En general, las hojas de estilo y función de JavaScript deben colocarse entre las etiquetas <head> </ head> etiquetas.

<Html>

<Head>

<Style type = "text / css"> <! -

/

Formato para todo el documento /

{externa

background-color: amarillo;

}

/ Formato inicial para la etiqueta div /

interior {

Anchura: 200px;

altura: 80px;

background-color: blue;

color blanco;

font-size: 20px;

padding: 10px;

margin-top: 0px;

margin-left: 0px;

}

-> </ Style>

<! - Función de script de Java a continuación ->

<Script language = "javascript">

changeMargin función () {

/ Esto establece el margen izquierdo de la div a 100 píxeles a la izquierda del borde de la ventana del navegador /

. Document.getElementById ( "interior") style.marginLeft = "100px";

/ Esto establece el margen superior de la div a 300 píxeles desde la parte superior del borde de la ventana del navegador /

. Document.getElementById ( "interior") style.marginTop = "300px";

/ Este código cambia el texto que se encuentra por el div a lo que quiere el programador /

. Document.getElementById ( "interior") innerHTML = "Margen cambiado a la izquierda y 100px 300px superior";

}

</ Script>

</ Head>

<Body id = "exterior">

<! - El usuario hace clic en el texto en el cuadro azul. Esto hace que el changeMargin () para ejecutar. Esta div se da el ID "interior" que necesitan los GetElementByID () ->

<Div id = "interior" onclick = "changeMargin ()"> Haga clic en el cuadro azul para cambiar márgenes superior e izquierda </ div>

</ Body>

</ Html>

3 Guarde el código HTML con el nombre de archivo "test.html".

4 Abra Internet Explorer. Haga clic en el menú "Archivo" y seleccionar "Abrir archivo".

5 Busque el archivo "test.html". Seleccionarlo con el ratón y haga clic en "Abrir".

6 Haga clic en el texto en el fondo azul con el ratón para cambiar los márgenes izquierdo y superior de la caja.

Consejos y advertencias

  • Tanto la función JavaScript llama "getElemenById ()" y "getElementsByName ()" elementos DOM puede acceder y manipular HTML. El método getElemenById () se puede conseguir en los elementos HTML directamente, mientras que "getElementsByName ()" se suma a la complejidad del programa, permitiendo únicamente el acceso indirecto a pesar de una matriz que contiene todos los elementos de la etiqueta marcada. Por otra parte, mientras que todas las etiquetas HTML se pueden marcar con una identificación, no todos pueden ser etiquetados con un nombre.
  • Los principales navegadores web se mostrarán los márgenes de CSS y el relleno de manera diferente. Incluso las diferentes versiones del mismo navegador pueden producir problemas de visualización inesperados. Siempre probar el código en diferentes navegadores y versiones anteriores del mismo navegador con el fin de garantizar el código funciona como se esperaba.