JS功能不會改變盒子的顏色
[英]JS function doesn't change box color
問題描述
JS只是拒絕執行任何操作-不顯示console.log，不顯示任何錯誤，不執行任何操作。
JS真的沒有任何生命跡象-我嘗試制作document.getelementbyid(box1)和（“ #box”）和（“ box”）是因為互聯網上的人們都在使用所有這些，並且它可以工作。
試圖使事件嵌入HTML中以調用該函數，並嘗試在window.onload等上調用該函數。
嘗試更改文本，顏色，大小和邊距-沒有任何效果。 有時會出現null錯誤-表示JS由於某種原因無法獲取樣式值。
var box = document.getElementById("#box1"); function changeColor() { var box = document.getElementById("#box1"); box.style.backgroundColor = 'red'; }
#box1 { height: 100px; width: 100px; background-color: #B9E257; } #box2 { height: 100px; width: 100px; background-color: #69ADE1; }
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="N.css" type="text/css"> </head> <body> <div id="box1">1</div> <div id="box2">2</div> <button onclick="changeColor()">Go!</button> <script src="N.js" type="text/javascript"></script> </body> </html>
為什么在地球上它不起作用？
3 個解決方案
解決方案1
2 已采納 2019-05-12 18:31:22
Document方法getElementById（）返回一個Element對象，該對象表示其id屬性與指定字符串匹配的元素。 由於如果指定了元素ID，則它們必須是唯一的，因此它們是快速訪問特定元素的有用方法。
有關更多信息，請訪問文檔
ID是區分大小寫的字符串，在文檔中是唯一的。
請檢查以下運行示例：
function changeColor() { var box = document.getElementById("box1"); console.log(box); box.style.backgroundColor = 'red'; }
#box1 { height: 100px; width: 100px; background-color: #B9E257; } #box2 { height: 100px; width: 100px; background-color: #69ADE1; }
<head> <link rel="stylesheet" href="N.css" type="text/css"> </head> <body> <div id="box1">1</div> <div id="box2">2</div> <button onclick="changeColor()">Go!</button> <script src="N.js" type="text/javascript"></script> </body>
解決方案2
0 2019-05-12 18:34:48
您的JS拋出錯誤僅僅是因為您在document.getElementById中使用# ，這是不允許的。 您需要在jQuery中而不是JS中為ID定義# 。
這是更新的代碼。 只是從document.getElementById刪除了# ，我沒有做其他任何事情。
function changeColor() { var box = document.getElementById("#box1"); box.style.backgroundColor = 'red'; }
#box1 { height: 100px; width: 100px; background-color: #B9E257; } #box2 { height: 100px; width: 100px; background-color: #69ADE1; }
<head> <link rel="stylesheet" href="N.css" type="text/css"> </head> <body> <div id="box1">1</div> <div id="box2">2</div> <button onclick="changeColor()">Go!</button> <script src="N.js" type="text/javascript"></script> </body>
解決方案3
0 2019-05-12 19:10:07
如果您真的喜歡那個＃，那么請使用var box = document.getElementById（“＃box1”）; 做
var box = document.querySelector("#box1");
js中的顏色變化不起作用
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.