En este artículo, sabremos cómo identificar el elemento HTML específico por su id utilizando el atributo de id de HTML , además de comprender su implementación a través de los ejemplos.
El atributo id es un identificador único que se utiliza para especificar el documento. Es utilizado por CSS y JavaScript para realizar una determinada tarea para un elemento único. En CSS, el atributo id se usa usando el símbolo # seguido de id. las comillas no son obligatorias en tag=” ” en todos los casos. Pero escribir con comillas es una buena práctica.
Sintaxis:
<tag id=""></tag>
Nota: Este es un atributo global , se puede usar en todas las etiquetas.
Ejemplo 1: En este ejemplo, simplemente diseñamos el elemento con id «geeks».
HTML
<!DOCTYPE html>
<html>
<head>
<style>
#geeks {
color: green;
}
</style>
</head>
<body>
<h2>Welcome to GeeksforGeeks</h2>
<h1 id="geeks">Hi Geeks!</h1> </body>
</html>
Producción:
Atributo de identificación HTML
Ejemplo 2: en este ejemplo, estamos agregando las propiedades de estilo al valor del atributo de identificación específico al obtener su valor de identificación.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Id Attributes</title>
<style>
#gfg {
color: #009900;
font-size: 50px;
font-weight: bold;
text-align: center;
}
#geeks {
text-align: center;
font-size: 20px;
}
</style>
</head>
<body>
<div id="gfg">GeeksforGeeks</div>
<div id="geeks">
A computer science portal for geeks
</div>
</body>
</html>
Producción:
Agregar las propiedades de estilo al valor del atributo de identificación específico
Nota: En HTML5, cualquier etiqueta HTML puede usar los atributos de identificación, pero en HTML 4.01 existen algunas restricciones para usar los atributos de identificación. No puede ser utilizado por las etiquetas <base>, <head>, <html>, <meta>, <param>, <script>, <style> y <title>. En HTML4.01, la identificación no puede comenzar con un número.
Uso de atributos de ID en JavaScript: en JavaScript, el atributo id se usa para manipular el texto, si desea realizar cambios en un elemento preciso en su secuencia de comandos, puede usar el atributo id.
Ejemplo 3: este ejemplo describe cómo obtener el valor del atributo id en Javascript a través del método getElementById() .
HTML
<!DOCTYPE html>
<html>
<head>
<title>Using the id in Javascript</title>
<style>
#geeks {
font-size: 50px;
color: #009900;
font-weight: bold;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="geeks">GeeksforGeeks</div>
<button onclick="geeksResult()">Display text change</button>
<script>
function geeksResult() {
document.getElementById("geeks").innerHTML =
"A computer science portal for geeks";
document.getElementById("geeks").style.color = "black";
}
</script>
</body>
</html>
Producción:
Obtener el valor del atributo id usando el método getElementById()
Navegadores compatibles:
- Google Chrome
- Borde 12 y superior
- Firefox 32 y superior
- explorador de Internet
- Mozilla
- Ópera
- Safari
Publicación traducida automáticamente
Artículo escrito por AshishVishwakarma1 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA