Cách dùng JavaScript để cập nhật thuộc tính phần tử Dom

[PVS]

Cách dùng JavaScript để cập nhật thuộc tính phần tử Dom

Thay đổi thuộc tính phần tử trong DOM
Khi bạn đã lựa chọn được 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ụ: phần tử HTML <img> như đã biết có thuộc tính src để chỉ ra URL hình ảnh mà thẻ đó hiển thị, đã biết nó có thuộc tính với tên là src thì sau khi có phần từ này từ DOM, bạn có thể đọc, gán thuộc tính và nó sẽ cập nhật lại trang HTML nếu gán

<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>

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

<script>
    var el = document.getElementsByTagName("a");
    el[0].href = "https://vnxf.vn";
</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

Thay đổi style phần tử (CSS)
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>

Ở trên là đoạn code ví dụ cách thay đổi color và width của phần tử thẻ div có ID là "demo".

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

Ví dụ sau sẽ tạo ra 1 nút và khi nhấp vào nút này nó sẽ tìm tất cả phần tử <p> sau đó đổi màu chữ sang màu đỏ, thay cỡ chữ là 30px.

<button onclick="changePcolor()">Thay đổi thẻ P</button>
<script>
    function changePcolor() {
        var plements = document.getElementsByTagName('p');
        for (var i = 0; i <= plements.length - 1; i++)  {
            var element = plements[i];
            console.log(element);
            element.style.color = "red";
            element.style.fontSize = "30px";
        }
    }
</script>

Chúc các bạn thành công.

Nguồn: Internet​