Home Kênh học tậpLập trìnhJavaScript Thay đổi nội dung HTML và khả năng hiển thị của JavaScript
Hướng dẫn học JavaScript từ cơ bản đến nâng cao

Thay đổi nội dung HTML và khả năng hiển thị của JavaScript

by admin
128 views

Chào các bạn, hôm nay mình sẽ giới thiệu đến các bạn về các chúng ta có thể thay đổi nội dung HTML với JavaScript nhé

THAY ĐỔI NỘI DUNG TRONG HTML

Một trong những phương thức ta dùng ở đây là getElementById(). Chúng ta hãy xem ví dụ sau: Ta dùng phương thức getElementById để tìm một phần tử trong HTML có id là demo và thay đổi nội dung phần tử dùng innerHTML từ aa thành hello

<html>
    <head>
        
    </head>
    <body>
        
        <p id="demo">aa</p>
        <script type="text/javascript">
            document.getElementById("demo").innerHTML = "hello";
        </script>
    </body>
</html>

Bạn có thể áp dụng cho những trường hợp khác, ví dụ như là thêm vào button

<html>
    <head>
        
    </head>
    <body>
        
        <p id="demo">aa</p>
        <button type="button" onclick='document.getElementById("demo").innerHTML= "Hello"'> Click</button>
    </body>
</html>

THAY ĐỔI NỘI DUNG TRONG CSS

<html>
    <head>
        
    </head>
    <body>
        
        <p id="demo">aa</p>
        <button type="button" onclick='document.getElementById("demo").style.fontSize= "35px"'> Click</button>
    </body>
</html>

JAVASCRIPT CÓ THỂ HIỂN THỊ CÁC PHẦN TỬ HTML

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p>JavaScript can show hidden HTML elements.</p>

<p id="demo" style="display:none">Hello JavaScript!</p>

<button type="button" onclick="document.getElementById('demo').style.display='block'">Click Me!</button>

</body>
</html> 

KHẢ NĂNG HIỂN THỊ CỦA JAVASCRIPT

Javascript có thể hiển thị dữ liệu theo nhiều các khác nhau:

  • Ghi vào thành phần HTML, bằng cách sử dụng lệnh innerHTML.
  • Ghi vào đầu ra HTML bằng cách sử dụng lệnh document.write().
  • Writing into an alert box, using window.alert().
  • Ghi ra bảng console của trình duyệt, bằng cách sử dụng lệnh console.log().

SỬ DỤNG THUỘC TÍNH INNERHTML

Để truy cập vào một phần tử HTML, JavaScript sử dụng phương thức document.getElementById(id).

Thuộc tính id định nghĩa phần tử HTML. Thuộc tính innerHTML định nghĩa nội dung HTML:

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My First Paragraph</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>

</body>
</html>

SỬ DỤNG LỆNH DOCUMENT.WRITE()

Trong quá trình kiểm thử chương trình ta sử dụng lệnh document.write() rất thuận tiện

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My first paragraph.</p>

<script>
document.write(5 + 6);
</script>

</body>
</html>
<!DOCTYPE html>
<html>
<body>

<h2>My First Web Page</h2>
<p>My first paragraph.</p>

<button type="button" onclick="document.write(5 + 6)">Try it</button>

</body>
</html> 

SỬ DỤNG LỆNH WINDOW.ALERT()

Chúng ta có thể sử dụng hộp cảnh báo để hiển thị dữ liệu bằng cách sử dụng lệnh window.alert()

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My first paragraph.</p>

<script>
window.alert(5 + 6);
</script>

</body>
</html>

SỬ DỤNG LỆNH CONSOLE.LOG()

Đối với mục đích gỡ lỗi, bạn có thể gọi phương thức console.log () trong trình duyệt để hiển thị dữ liệu.

<!DOCTYPE html>
<html>
<body>

<script>
console.log(5 + 6);
</script>

</body>
</html>

CHỨC NĂNG IN TRONG JAVASCRIPT

JavaScript không có bất kỳ đối tượng in hoặc phương thức in. Bạn không thể truy cập các thiết bị đầu ra từ JavaScript.

Ngoại lệ duy nhất là bạn có thể gọi phương thức window.print () trong trình duyệt để in nội dung của cửa sổ hiện tại.

<!DOCTYPE html>
<html>
<body>

<h2>The window.print() Method</h2>

<p>Click the button to print the current page.</p>

<button onclick="window.print()">Print this page</button>

</body>
</html>

Xem thêm: Serial bài học Javascript từ cơ bản đến nâng cao

Series Navigation<< Cách sử dụng biến và chuỗi trong JavaScriptToán tử trong JavaScript >>

Related Posts

error: Content is protected !!