-
Cómo utilizar DOM para establecer el atributo ancho de un elemento
-
Un desarrollador Web utiliza el Hyper Text Markup Language (HTML) para diseñar sus páginas web. El Document Object Model (DOM) permite al desarrollador para identificar y manipular dinámicamente elementos del sitio web con el lenguaje de programación JavaScript. El uso de JavaScript o un marco de JavaScript, como jQuery, el desarrollador puede optar por establecer o cambiar la anchura de los elementos DOM individuales basadas en una interacción con usuarios del sitio.Código HTML DOM Cuando Uso de JavaScript
Un desarrollador web puede escribir un elemento DOM HTML y asignarle un ID y un controlador de eventos click. En este ejemplo, un elemento de botón se ha asignado el identificador de yourButton y una función de controlador click llamado changeSize.
<Body>
<Input type = "button" id = "yourButton" onclick = "changeSize ()" value = "Cambiar la anchura del botón" />
</ Body>
JavaScript
A códigos de desarrolladores Web un elemento de JavaScript correspondiente utilizando la propiedad de ancho establecido. El usa getElementById de JavaScript para seleccionar el elemento de HTML y establece la anchura del elemento con la propiedad width estilo. Consideremos el siguiente ejemplo. Este JavaScript cambiará el tamaño del elemento de botón de la muestra HTML DOM. Cuando se hace clic en el botón, la función se llama changeSize y establecer la propiedad width establece el nuevo tamaño del botón en una muy grande 1000 píxeles.
<Head>
<Script type = "text / javascript">
changeSize función ()
{
document.getElementById ( "yourButton") style.width = "1000 píxeles.";
}
</ Script>
</ Head>
Ejemplo completa JavaScript
Este ejemplo completado combina los fragmentos de los dos ejemplos anteriores para demostrar cómo la anchura del elemento de DOM puede ser manipulado con JavaScript.
<Html>
<Head>
<Script type = "text / javascript">
changeSize función ()
{
document.getElementById ( "yourButton") style.width = "1000 píxeles.";
}
</ Script>
</ Head>
<Body>
<Input type = "button" id = "yourButton" onclick = "changeSize ()" value = "Cambiar la anchura del botón" />
</ Body>
</ Html>
Código HTML DOM cuando se utiliza jQuery
Una vez más, el desarrollador web debe escribir el código HTML. En este ejemplo, una etiqueta de párrafo estándar encapsula un poco de texto.
<Body>
<P> Aquí es un poco de texto. jQuery establecerá este tamaño del elemento que contiene este texto. </ p>
</ Body>
Colocación de jQuery
El framework jQuery debe adjuntarse al documento. El marco está disponible para su descarga desde el sitio web de jQuery o puede vincularse a partir de la API de Google.
<Head>
<Script type = "text / javascript" src = "jquery.js"> </ script>
<Script type = "text / javascript">
$ (Document) ready (function () {
$("p").width(600);});
</ Script>
</ Head>
<Body>
<P> Aquí es un poco de texto. jQuery establecerá este tamaño del elemento que contiene este texto. </ p>
</ Body>
