我有這個html代碼<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="tablezone.css"> <script src="table.js"></script> </head><body> <div id="divTable"; class="zone"></div> </body></html>這是 JavaScript 代碼：var img = document.createElement("img");img.src="/Tables/table.png";var src = document.getElementById("divTable");src.appendChild(img);這是CSS代碼：body{ background: url('/Tables/Riviera.jpeg'); height: 100vh; background-size: cover; background-position: center; background-repeat: no-repeat;}.zone{ background: rgba(200, 200, 200, 0.7); width: 1000px; height: 600px; margin-left: 200px; }當我在網絡瀏覽器上運行代碼時，顯示的 div 中沒有圖像。
1 回答
MMMHUHU
TA貢獻1834條經驗 獲得超8個贊
該腳本在divTable添加到 DOM 之前運行，因此該行document.getElementById("divTable")返回null。將標簽移動script到主體的末尾可確保該divTable元素在運行之前位于 DOM 中getElementById。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="tablezone.css">
</head>
<body>
<div id="divTable" class="zone"></div>
<script src="table.js"></script>
</body>
</html>
- 1 回答
- 0 關注
- 169 瀏覽
添加回答
舉報
0/150
提交
取消