Thuộc tính Id và việc sử dụng JavaScript trong Html - #4

Đăng bởi: Minacode|Cập nhật:02-01-2024

Ok Anh em, Bài viết này sẽ tiếp nối chủ đề học nhanh Html cùng Minacode với các nội dung liên quan đến Thuộc tính ID và việc sử dụng JavaScript trong Html nhé. Nào Let’s go thôi!

Thuộc tính id trong HTML

Thuộc tính id được sử dụng để chỉ định một id duy nhất cho một thẻ trong Html. Chúng ta sẽ không được để nhiều thẻ có cùng id trong Html.

Cũng giống như thuộc tính Class, Thuộc tính id cũng được sử dụng để khai báo style cụ thể. Nó cũng được JavaScript sử dụng để truy cập và thao tác với tên id cụ thể. Cú pháp của id là: Đứng đầu là ký tự (#), theo sau là tên id. Sau đó, xác định thuộc tính CSS trong dấu ngoặc nhọn {}.

<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
</style>
</head>
<body>
<h1 id="myHeader">Minacode</h1>
</body>
</html>

Lưu ý: Tên id có phân biệt chữ hoa chữ thường Và phải chứa ít nhất một ký tự, không được bắt đầu bằng số và không được chứa khoảng trắng (dấu cách, tab, v.v.).

Sự khác biệt giữa Class và Id:

Một Class có thể được sử dụng bởi nhiều thẻ trong Html, trong khi tên id chỉ được sử dụng duy nhất cho một thẻ trong trang.

Đánh dấu các phần của trang bằng id:

Đánh dấu các phần của trang được sử dụng để cho phép người đọc chuyển đến các phần cụ thể của trang web nên rất hữu ích nếu trang của bạn rất dài. Để sử dụng việc đánh dấu, trước tiên bạn phải tạo các Id cho các thành phần, sau đó thêm giá trị Id vào các thanh điều hướng.

Sau đó, khi nhấp vào các thanh điều hướng trang sẽ cuộn đến vị trí thành phần có đánh dấu.

Ví dụ bạn có một phần nội dung ở chương 15:

<h2 id="C15">Chương 15</h2>

Sau đó, thêm liên kết vào thanh điều hướng ("Chuyển tới Chương 15"), từ trong cùng một trang:

<a href="#C15">Chuyển xuống Chương 15</a>

Hoặc có thể điều hướng sang một trang khác ("Chuyển sang Chương 15") từ một trang khác:

<a href="trang3.html#C15">Chuyển sang Chương 15</a>

Sử dụng thuộc tính id trong JavaScript

Thuộc tính id cũng có thể được JavaScript sử dụng để thực hiện một số tác vụ cho một thành phần cụ thể đó.

JavaScript có thể truy cập một phần tử có id cụ thể bằng phương thức getElementById():

<script>
function displayResult() {
  document.getElementById("myHeader").innerHTML = "Xin chào! Mình là Minacode đây";
}
</script>

<iframe> trong Html

<iframe src="url" title="description"></iframe>

Các bạn có thể sử dụng các thuộc tính height và width để chỉ định kích thước của iframe. Chiều cao và chiều rộng được chỉ định bằng pixel theo mặc định Hoặc bạn có thể thêm thuộc tính style và sử dụng CSS height và width cho thuộc tính:

<!DOCTYPE html>
<html>
<body>
<h2>Khu vực Minacode</h2>
<iframe src="https://minacode.net/" style="height:200px;width:300px" title="Iframe Example"></iframe>
</body>
</html>

Ta có:

Theo mặc định, iframe có đường viền xung quanh nó.

Để xóa đường viền, hãy thêm thuộc tính style và sử dụng CSS border:

style="border:none;"

JavaScript trong Html

JavaScript sẽ làm cho các trang Html của chúng ta động và tăng tính trải nghiệm cho người dùng.

Thẻ <script> được sử dụng để chứa nội dung Javascript. Để chọn một phần tử hay một thẻ trong Html, JavaScript thường sử dụng phương thức document.getElementById().

<!DOCTYPE html>
<html>
<body>
<h2>Sử dụng JavaScript để thay đổi nội dung văn bản</h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello Minacode!";
</script> 
</body>
</html>

JavaScript có thể thay đổi Style:

document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.backgroundColor = "yellow";

JavaScript có thể thay đổi thuộc tính:

document.getElementById("image").src = "banner.png";

Thẻ <noscript> trong Html sẽ có chứng năng xác định nội dung được hiển thị cho người dùng khi trình duyệt của họ hoặc có trình duyệt không hỗ trợ biên dịch Javascript

<script>
document.getElementById("demo").innerHTML = "Xin chào! Mình là Minacode!";
</script>
<noscript>Rất tiếc! Trình duyệt của bạn không hỗ trợ JavaScript!</noscript>

>>Còn tiếp nhé Anh Em>>