Thay đổi thuộc tính của thẻ HTML bằng Javascript

DOWNLOAD DEMO

Thuộc tính của thẻ HTML đóng vai trò rất quan trọng trong việc kết hợp giữa HTML và CSS, vì vậy hãy tìm hiểu nó bằng cách  trình bày cách thay đổi giá trị của thuộc tính, thêm thuộc tính và xóa thuộc tính của thẻ HTML bằng Javascript.

Để thay đổi thuộc tính của thẻ HTML thì chúng ta sử dụng DOM để truy vấn tới đối tượng HTML cần thay đổi, sau đó sử dụng một số phương thức và thuộc tính liên quan đê xử lý.

Ví dụ: Tạo 2 button và 1 thẻ img, khi click vào button thứ nhất thì đổi hình mới và khi click vào button thứ 2 thì đổi lại hình cũ.

Code RUN
<div>
    <img id="hinhanh" src="https://freetuts.net/upload/tut_post/images/2017/03/29/810/quan-ly-ten-mien-trong-direct-admin.gif" alt="Hình ảnh"/>
</div>

<input type="button" id="btn1" value="Đổi Hình"/>
<input type="button" id="btn2" value="Trở về hình cũ"/>

<script language="javascript">

    var hinh1 = 'https://freetuts.net/upload/tut_post/images/2017/03/29/810/quan-ly-ten-mien-trong-direct-admin.gif';
    var hinh2 = 'https://freetuts.net/upload/tut_post/images/2016/09/27/746/typescript-basic-types.gif';

    document.getElementById("btn1").onclick = function(){
        document.getElementById("hinhanh").src = hinh2;
    };


    document.getElementById("btn2").onclick = function(){
        document.getElementById("hinhanh").src = hinh1;
    };

</script>

Như vậy để thay đổi thuộc tính của thẻ HTML thì ta sử dụng cú pháp sau:

htmlObject.ten_thuoc_tinh = "Giá trị";

Trong đó htmlObject là đối tượng HTML được lấy bằng DOM.

-------------------#####-------------------

Nguồn: freetuts.net

KHÓA HỌC ĐANG GIẢM GIÁ

UNICA - Học lập trình JAVASCRIPT

(Giảng viên: )

XEM