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.

Học Javascript qua các bài tập thực hành

Bạn muốn học và nắm bắt Javascript một cách nhanh nhất thì khoá học Javascript từ đầu sẽ giúp bạn, đây là khóa học được biên soạn dành cho người mới học, và mọi thứ sẽ thông qua thực hành, bạn sẽ dễ dàng nắm bắt và nhớ lâu hơn. Bạn sẽ được học xử kỹ thuật lý các hiệu ứng, thao tác với DOM, BOM và nhiều kỹ thuật khác.

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

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

Nguồn: freetuts.net

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

FEDU - 25 – Thiết kế hiệu ứng bằng Javascript và illustrator

(Giảng viên: NGUYỄN ĐỨC VIỆT )

XEM
FEDU - 22 – Học tất tần tật về Javascript từ đầu

(Giảng viên: Nguyễn Đức Việt)

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

(Giảng viên: )

XEM