在 HTML 正文中顯示 JavaScript 變數
-
使用
innerHTML
在 HTML 正文中顯示 JavaScript 變數 -
使用
document.write()
屬性在 HTML 正文中顯示 JavaScript 變數 -
使用
window.alert
屬性在 HTML 正文中顯示 JavaScript 變數
顯式定義 script
標籤並在 HTML 正文中新增必要的輸出程式碼塊通常更容易。我們還在 head
標籤中使用 script
標籤來載入 body
標籤之前的 JavaScript 程式碼。
每個慣例都有它的備註;如果我們需要檢查程式碼是否沒有錯誤,我們可以在 head
部分新增 JavaScript 函式來執行任務。我們還可以在 body
元素中使用 JavaScript 來實現點選事件和其他動態功能。
在這裡,我們將演示如何在 HTML 正文中顯示 JavaScript 變數,具體來說,我們將在 body
元素中新增我們的程式碼塊。但是在 HTML 正文中傳遞值和臨時顯示由 JavaScript 程式碼約定觸發的值是有區別的。
使用 innerHTML
在 HTML 正文中顯示 JavaScript 變數
通過獲取特定的 id
或 class
並傳遞變數的值來使用 innerHTML
是在 HTML 正文中顯示 JavaScript 變數的最常見方法之一。
我們將在我們的 HTML 正文中使用 id = "input"
初始化一個 span
標籤。然後 script
標籤將通過 innerHTML
屬性將一個變數傳送到該 id = "input"
。在 HTML 正文中放置 JavaScript 變數時,這種 DOM 操作很方便。
程式碼片段:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Test</title>
</head>
<body>
<p> Hello! I'm <span id="input"></span>.</p>
<script>
document.getElementById('input').innerHTML = "Robert" ;
</script>
</body>
</html>
輸出:
使用 document.write()
屬性在 HTML 正文中顯示 JavaScript 變數
這裡,初始化 document.write(parameter)
屬性的系統主要用於測試變數。在這種情況下,引數
是 JavaScript 中定義的變數或物件。
我們將在段之前的 script
標記中宣告變數以顯示它。稍後,我們將有一個 p
標籤,在其中,另一個 script
標籤採用上層指令碼的啟動。
程式碼片段:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Test</title>
<script>
var input = "Gwen";
function doc(){
document.write(input);}
</script>
</head>
<body>
<p> Hello! I'm <script>doc(input)</script>.</p>
</body>
</html>
輸出:
使用 window.alert
屬性在 HTML 正文中顯示 JavaScript 變數
這是通過 DOM 操作測試你的變數的一個非常簡單的過程。
我們將定義一個 JavaScript 物件或變數並在此處儲存一個隨機值。在 script
標籤內,我們將宣告 window.alert(variable)
,並且該屬性將在觸發視窗物件時提示一條訊息。
程式碼片段:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Test</title>
</head>
<body>
<script>
var input = "Hello! I'm Tom.";
window.alert(input);
</script>
</body>
</html>
輸出: