使用 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
相关标签