Liên hệ
Ủng hộ, đăng ký theo dõi kênh

Cập nhật thuộc tính phần tử Dom - JavaScript

Sử dụng JavaScript để cập nhật thay đổi các thuộc tính phần tử HTML cũng như các thuộc tính style CSS

Thay đổi thuộc tính phần tử trong DOM

Khi bạn đã lựa chọn được phần tử trong DOM (chọn phần tử trong DOM), bạn có thể thay đổi thuộc tính liên quan đến phần tử, ví dụ thay đổi nội dung bằng thuộc tính innerHTML

Ví dụ thay đổi địa chỉ url của ảnh trong phần tử img bằng cách cập nhật thuộc tính src

<img id="myimg" src="orange.png" alt="" />

<script>
    var el = document.getElementById("myimg");
    el.src = "apple.png";
</script>

Tương tự, thay đổi thuộc tính href trong phần tử liên kết

<a href="http://www.example.com">Some link</a>

<script>
    var el = document.getElementsByTagName("a");
    el[0].href = "https://xuanthulab.net";
</script>

Như vậy bạn thấy thông qua JavaScript bạn có thể thay đổi mọi thuộc tính của phần tử HTML

Đổi style phần tử

style của các phần tử HTML có thể được thay đổi thông qua JavaScript, để thay đổi truy cập vào thuộc tính style và thay đổi các thông số yêu cầu:

<div id="demo" style="width:200px">Nội dung Ví dụ</div>

<script>
  var x = document.getElementById("demo");
  x.style.color = "6600FF";
  x.style.width = "100px";
</script>

Ví dụ trên đã thay đổi colorwidth của phần tử thẻ div

Tất cả các thuộc tính CSS đều có thể cập nhật bằng JavaScript. Điều bạn cần nhớ là không được sử dụng ký hiệu - trong tên thuộc tính, mà bạn cần chuyển tên dạng CSS thành dạng tên camelCase ví dụ: trong CSS thuộc tính background-color thì trong JavaScript thuộc tính này là backgroundColor

Vui lòng đăng ký ủng hộ kênh