ID Atributo
Tutorial HTML » Atributo de ID HTML
El atributo id especifica una identificación única para un elemento HTML. El valor del atributo id debe ser único dentro del documento HTML.
El atributo id se utiliza para señalar una declaración de estilo específica en una hoja de estilo. También lo utiliza JavaScript para acceder y manipular el elemento con la identificación específica.
La sintaxis de id es: escriba un carácter hash (#), seguido de un nombre de id. Luego, defina las propiedades de CSS entre llaves {}.
Sintaxis:
Cómo usar el atributo ID - ejemplo
En el siguiente ejemplo tenemos un elemento <div> que apunta al nombre de id "mi_texto". Este elemento <div> se diseñará de acuerdo con la definición de estilo #mi_texto en la sección:
<!DOCTYPE html>
<html>
<head>
<style>
#mi_texto {
background-color: #9DD0E1;
color: #006;
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
width: 99%;
margin-right: auto;
margin-left: auto;
}
</style>
</head>
<body><h2>El atributo ID</h2>
<p>Use CSS para diseñar un elemento con la identificación "mi_texto":</p><h1 id="mi_texto">mi nuevo método de estilos de texto</h1>
</body>
</html>
Diferencia entre ID y class - ejemplos
Un nombre de clase puede ser utilizado por varios elementos HTML, mientras que un nombre de identificación solo debe ser utilizado por un elemento HTML dentro de la página:
<!DOCTYPE html>
<html>
<head>
<style>
/* Style the element with the id "myHeader" */
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
/* Style all elements with the class name "city" */
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body><h2>Diferencia entre clase e identificación</h2>
<p>Un nombre de clase puede ser utilizado por varios elementos HTML, mientras que un nombre de identificación solo debe ser utilizado por un elemento HTML dentro de la página:</p><!-- Un elemento con una identificación única -->
<h1 id="myHeader">Mis ciudades</h1><!-- Varios elementos con la misma clase -->
<h2 class="city">Londres</h2>
<p>Londres es la capital de Inglaterra.</p><h2 class="city">Paris</h2>
<p>París es la capital de Francia.</p><h2 class="city">Tokio</h2>
</body>
<p>Tokio es la capital de Japón.</p>
</html>
Usando el atributo id en JavaScript
JavaScript también puede utilizar el atributo id para realizar algunas tareas para ese elemento específico.
JavaScript puede acceder a un elemento con una identificación específica con el método getElementById ():
<!DOCTYPE html>
<html>
<body><h2>Usando el atributo id en JavaScript</h2>
<p>JavaScript puede acceder a un elemento con una identificación específica mediante el método getElementById ():</p><h1 id="myHeader">¡Hola Mundo!</h1>
<button onclick="displayResult()">Cambiar texto</button><script>
</body>
function displayResult() {
document.getElementById("myHeader").innerHTML = "¡Que tenga un lindo día!";
}
</script>
</html>
diferencia id y clas, diferencia entre id y class en html5, diferencia entre div id y class, selector id y class, que diferencia hay id y class en css
Atributo de ID HTML - html.es
This tool makes it easy to create, adjust, and experiment with custom colors for the web.
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.
Find here examples of creative and unique website layouts.
Find here examples of creative and unique website CSS HTML menu.