Атрибут id HTML
Атрибут id используется для указания уникального идентификатора элемента HTML-документа. Он выделяет уникальный идентификатор, который используется CSS и JavaScript для выполнения определенных задач.
Примечание. В таблице каскадных стилей (CSS) мы можем легко выбрать элемент с определенным идентификатором, используя символ #, за которым следует идентификатор.
Примечание. JavaScript может получить доступ к элементу с заданным идентификатором с помощью метода getElementById() или querySelector().
Синтаксис
<tag id="value">
css
В следующем примере показано, как использовать атрибут id в документе CSS:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
#Cars {
padding: 40px;
background-color: lightblue;
color: black;
text-align: center;
}
#Bikes {
padding: 50px;
background-color: lightGreen;
text-align: center;
}
</style>
</head>
<body>
<p>Используйте CSS для оформления элемента с идентификатором:</p>
<h2 id="Cars">Автомобили</h2>
<h2 id="Bikes">Велосипеды</h2>
</body>
</html>
<html>
<head>
<title>Document</title>
<style>
#Cars {
padding: 40px;
background-color: lightblue;
color: black;
text-align: center;
}
#Bikes {
padding: 50px;
background-color: lightGreen;
text-align: center;
}
</style>
</head>
<body>
<p>Используйте CSS для оформления элемента с идентификатором:</p>
<h2 id="Cars">Автомобили</h2>
<h2 id="Bikes">Велосипеды</h2>
</body>
</html>
JavaScript
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<script>
function viewdate() {
let x = document.querySelector("#dob").value;
document.querySelector("#demo").innerHTML = x;
}
</script>
</head>
<body>
Имя сотрудника:
<input type="text" placeholder="Ваше доброе имя"/>
Дата присоединения:
<input type="date" id="dob">
<button onclick="viewdate()">Отправить</button>
<h2 id="demo"> </h2>
</body>
</html>
<html>
<head>
<title>Document</title>
<script>
function viewdate() {
let x = document.querySelector("#dob").value;
document.querySelector("#demo").innerHTML = x;
}
</script>
</head>
<body>
Имя сотрудника:
<input type="text" placeholder="Ваше доброе имя"/>
Дата присоединения:
<input type="date" id="dob">
<button onclick="viewdate()">Отправить</button>
<h2 id="demo"> </h2>
</body>
</html>
