By GokiSoft.Com| 10:01 20/05/2020|
Tài Liệu Javascript

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>