JavaScript修改元素样式求助：点击按钮无法更改圆形元素背景色

你的代码里有两个关键问题导致操作无效：

1. HTML元素属性的语法错误
   你的div标签里，class属性后面多了一个逗号：

   <div class="circle", style="color:#1c87c9"> text </div>
   

   这个逗号会被浏览器解析为class属性值的一部分，导致元素的实际class是circle,（带逗号），而不是circle。因此document.querySelector(".circle")无法找到目标元素，变量cir为null，调用cir.style时会直接报错，函数执行失败。

2. 可选优化：避免页面加载顺序问题
   虽然你的script放在了body内部、div元素之后，页面加载时能正确获取元素，但如果后续调整代码结构（比如把script移到head里），就会出现获取不到元素的情况。建议在函数内部获取元素，确保每次点击按钮时都能准确找到目标。

修正后的完整代码 #

HTML文件：

<!DOCTYPE html>
<html>
<head> 
    <title> www.tothemoon.com</title>
    <link rel="stylesheet" type="text/css" href="Mpage.css"/>
</head>
<body> 
    <button id="but" onclick="FM()" style="font-size:50px; background-color:blue; border:none">try me </button>
    <div class="circle" style="color:#1c87c9"> text </div>
    <script>
        function FM(){
            var cir = document.querySelector(".circle");
            cir.style.backgroundColor = "yellow";  
        }
    </script>
</body>
</html>

CSS文件（无需修改）：

.circle {
    background-color: #ccb22e;
    width: 200px;
    height: 200px;
    border-radius: 50%;
}

这样修改后，点击按钮就能正常将.circle元素的背景色改为黄色了。

内容的提问来源于stack exchange，提问作者mulan