JavaScript - DOM HTML và CSS Lấy và thay đổi nội dung bên trong phần tử HTML và thay đổi thuộc tính của phần tử HTML

Thông báo:

Bạn muốn website của mình xuất hiện tại thanh bên phải tại QuangNinhBay.Com đặt liên kết tại bài viết dưới đây.



 

Xin chào các bạn hôm nay mình sẽ tiếp tục 1 bài viết về DOM trong JavaScript và trong bài này mình sẽ chú trọng đến

DOM HTML:

            Lấy và thay đổi nội dung bên trong phần tử HTML
            Lất và thay đổi thuộc tính của phần tử HTML

bắt đầu luôn cho nóng nhé mình sẽ chú thích theo từng dòng trong đoạn code phía dưới để các bạn dễ hiểu:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h2>QuangNinhBay.Com Niềm vui là chia sẻ</h2>
    <input type="text" id="inpText">
    <!-- 
        DOM HTML: 
            Lấy và thay đổi nội dung bên trong phần tử HTML
            Lất và thay đổi thuộc tính của phần tử HTML
     -->
    <script>
        var h2 = document.querySelector('h2');  // tìm phần tử theo cú pháp selector (trả về thẻ h2) và gán giá trị trả về cho biến h2
        console.log(h2.innerHTML);  //log ra nội dung bên trong phần tử h2
        /*
            h2.innerHTML : lấy ra nội dung bên trong phần tử h2
        */

        h2.innerHTML = "Trần Tiến";   // thay đổi nội dung bên trong phần tử h2
        console.log(h2.innerHTML);  // log ra nội dung mới thay đổi của h2

        var inpText = document.querySelector('#inpText');   //tìm thẻ có id inpText và gán cho biến inpText
        console.log(inpText.type);
        /*
            log ra giá trị của thuộc tính bên trong phần tử vừa tìm được
            inpText.type : lấy ra giá trị của thuộc tính type
        */
        inpText.type = "submit";    // thay đổi giá trị của thuộc tính type từ text thành submit
        console.log(inpText.type);
        inpText.id = "linhtinh";    //thay đổi giá trị của thuộc tính id

        inpText.style.width = "200px";  //thay đổi giá trị thuộc tính css width 
        inpText.style.height = "200px";//thay đổi giá trị thuộc tính css height
        inpText.style.backgroundColor = "red";
        /*
            thay đổi giá trị thuộc tính background color
            Lưu ý: với những thuộc tính dài từ 2 chữ trở lên sẽ bỏ dấu gạch giữa và viết hoa chữ cái đầu tiên ngay sau dấu gạch giữa
                VD: background-color -> backgroundColor
                    border-radius -> borderRadius
        */
    </script>
</body>

</html>
Cảm ơn các bạn đã ghé thăm blog!
CÓ THỂ BẠN ĐANG TÌM