使用 Javascript 編輯 HTML DOM
[英]Editing HTML DOM using Javascript
問題描述
我的任務是使用 Javascript 修改講師提供的框。 但是，我對 Javascript 文件所做的更改似乎都不起作用。 我已將我的 HTML 文件index.html和 Javascript 文件命名為javascript.js . 這是我所擁有的：
document.getElementById("button1").addEventListener("click", function(){ document.getElementById("box").style.height = "250px"; }); document.getElementById("button2").addEventListener("click", function(){ document.getElementById("box").style.color:orange }); document.getElementById("button3").addEventListener("click", function(){ document.getElementById("box").style.opacity = 0; }); document.getElementById("button4").addEventListener("click", function(){ document.getElementById("box").style.height = "150px"
<.DOCTYPE html> <html> <head> <title>Jiggle Into JavaScript</title> <script type="text/javascript" src="javascript:js"> </script> </head> <body> <p>Press the buttons to change the box;</p> <div id="box" style="height:150px; width:150px; background-color:orange; margin:25px"></div> <button id="button1">Grow</button> <button id="button2">Blue</button> <button id="button3">Fade</button> <button id="button4">Reset</button> </body> </html>
3 個解決方案
解決方案1
3 2020-08-11 01:10:09
問題在這里： document.getElementById("box").style.color:orange 。 它應該是document.getElementById("box").style.color = "orange"; .
document.getElementById("button1").addEventListener("click", function(){ document.getElementById("box").style.height = "250px"; }); document.getElementById("button2").addEventListener("click", function(){ document.getElementById("box").style.color = "orange"; }); document.getElementById("button3").addEventListener("click", function(){ document.getElementById("box").style.opacity = 0; }); document.getElementById("button4").addEventListener("click", function(){ document.getElementById("box").style.height = "150px" });
<.DOCTYPE html> <html> <head> <title>Jiggle Into JavaScript</title> <script type="text/javascript" src="javascript:js"> </script> </head> <body> <p>Press the buttons to change the box;</p> <div id="box" style="height:150px; width:150px; background-color:orange; margin:25px"></div> <button id="button1">Grow</button> <button id="button2">Blue</button> <button id="button3">Fade</button> <button id="button4">Reset</button> </body> </html>
解決方案2
0 2020-08-11 01:12:56
好吧，當我運行代碼片段時，堆棧“mini google inspect”顯示 javascript 中的“：”不應該存在！
所以你的代碼應該是
document.getElementById("button2").addEventListener("click", function(){
document.getElementById("box").style.color = "orange";
});
而不是你目前擁有的。
解決方案3
0 2020-08-11 01:35:47
document.getElementById("button1").addEventListener("click", function(){ document.getElementById("box").style.height = "250px"; }); document.getElementById("button2").addEventListener("click", function(){ document.getElementById("box").style.background = "blue"; }); document.getElementById("button3").addEventListener("click", function(){ document.getElementById("box").style.opacity = 0; }); document.getElementById("button4").addEventListener("click", function(){ document.getElementById("box").style.height = "150px"; });
<body> <p>Press the buttons to change the box:</p> <div id="box" style="height;150px: width;150px: background-color;orange: margin;25px:opacity; 1;"></div> <button id="button1">Grow</button> <button id="button2">Blue</button> <button id="button3">Fade</button> <button id="button4">Reset</button> </body>
檢查你的語法:)
使用父級中的javascript編輯iframe的DOM
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
使用父級中的javascript編輯iframe的DOM
使用javascript用嵌入式PHP編輯html
使用Javascript函數在html中編輯表格的單元格
使用JavaScript / jQuery遍歷HTML DOM
使用 javascript dom 在 HTML 中插入引用元素
使用DOM將JavaScript數組轉換為HTML表
使用DOM生成HTML頁面-Javascript
使用DOM在HTML中使用參數的Javascript調用函數
如何使用JavaScript DOM在html中添加svg？
使用DOM和JavaScript將XML數據加載到HTML
相關標簽