JavaScript Introduction - Giới thiệu về Javascript
JavaScript có thể thay đổi nội dung HTML :
Một trong số nhưng phương thức của Javascript HTML là getElementById().
Đây là một ví dụ cho những cách dùng phương thức để "tìm" một thành phần HTML (với id="demo") và thay đổi nội dung thành phần (innerHTML) thành "Hello JavaScript":
ví dụ
document.getElementById("demo").style.fontSize = "35px";<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p id="demo">JavaScript can change the style of an HTML element.</p>
<button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">Click Me!</button>
</body>
</html>
Tip: JavaScript chấp nhận cả dấu ngoặc kép và ngoặc đơn :
ví dụ
document.getElementById("demo").style.display = "none";<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p id="demo">JavaScript can hide HTML elements.</p>
<button type="button" onclick="document.getElementById('demo').style.display='none'">Click Me!</button>
</body>
</html> JavaScript có thể thay đổi giá trị thuộc tính HTML:
Trong ví dụ này JavaScript thay đổi giá trị của src (source) là một thuộc tính của thẻ <img>:
document.getElementById('myImage').src='pic_bulbon.gif'
document.getElementById('myImage').src='pic_bulboff.gif'<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p>JavaScript can change HTML attribute values.</p>
<p>In this case JavaScript changes the value of the src (source) attribute of an image.</p>
<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light</button>
<img id="myImage" src="pic_bulboff.gif" style="width:100px">
<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the light</button>
</body>
</html>
JavaScript có thể thay đổi phong cách (styles) HTML (CSS):
Thay đổi phong cách (styles) của một thành phần HTML, là một biến thể của thay đổi thuộc tính HTML:
ví dụ
document.getElementById("demo").style.fontSize = "35px";<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p id="demo">JavaScript can change the style of an HTML element.</p>
<button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">Click Me!</button>
</body>
</html>
JavaScript có thể giấu các thành phần HTML
Giấu thành phần HTML bằng cách thay đổi phong cách(style) display (hiển thị):
ví dụ
document.getElementById("demo").style.display = "none";<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p id="demo">JavaScript can hide HTML elements.</p>
<button type="button" onclick="document.getElementById('demo').style.display='none'">Click Me!</button>
</body>
</html>
JavaScript có thể hiển thị các thành phần HTML
Hiển thị các thành phần HTML ẩn có thể cũng được làm bằng cách thay đổi phong cách (style) display(hiển thị) :
ví dụ
document.getElementById("demo").style.display = "block";<!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>
Tags:
Phản hồi từ học viên
5
(Dựa trên đánh giá ngày hôm nay)
