无法使用 JavaScript 更改 CSS答案

【问题标题】：Can't change CSS with JavaScript无法使用 JavaScript 更改 CSS
【发布时间】：2015-11-14 08:36:59
【问题描述】：

我想创建一个页面，首先显示一个红色矩形和一个按钮。如果您按下按钮，矩形将变为蓝色正方形。这是我的代码：

<!doctype html>
<html>
<head>



    <style>
        #e1 {
            background-color: red ;
            width: 400px ;
            height: 200px ;
            margin: 0 auto;

        }
        .wrapper {
            text-align: center;
        }

    </style>


</head>

<body>


    <div id ="e1">
    </div>



    <div class="wrapper">
    <button type="button" onclick="myfunction()" style="width: 100px; height: 100px; position:center;">Switch</button>
    </div>

    <script type="text/javascript">
        function myfunction() {
            document.getElementById("e1").style.background-color= "blue";
            document.getElementById("e1").style.width = "400px";
            document.getElementById("e1").style.height = "400px";
        }
    </script>
</body>
</html>

问题是矩形没有变成正方形，这意味着 JavaScript 有一些问题。

【问题讨论】：

在按钮上添加事件监听器
document.getElementById("e1").style.background-color= "blue"; 是语法错误。像document.getElementById("e1").style['background-color']= "blue"; 那样做
即使我用 alert 替换函数内部的内容，它也会提醒它，所以问题出在以下代码：document.getElementById("e1").style.background-color="blue"; document.getElementById("e1").style.width = "400px"; document.getElementById("e1").style.height = "400px";
尝试document.getElementById("e1").style.backgroundColor 代替背景色
您缺少按钮的 oening 标签

标签： javascript html css

【解决方案1】：

变化：

document.getElementById("e1").style.background-color= "blue";

收件人：

document.getElementById("e1").style.backgroundColor = "blue";

【讨论】：

【解决方案2】：

两件事——

首先你有语法错误

document.getElementById("e1").style.background-color= "blue";

应该是

document.getElementById("e1").style['background-color']= "blue";

或

document.getElementById("e1").style.backgroundColor= "blue";

其次，我不知道这是否是您问题中的一种类型，但您错过了按钮标签中的开头<。这就是它失败的原因。

这里有什么

button type = "button" onclick = "myfunction()" style = "width: 100px ; hight: 100px ; position:center ;">Switch</button>

应该是这样的

<button type = "button" onclick = "myfunction()" style = "width: 100px ; hight: 100px ; position:center ;">Switch</button>

Working Fiddle

【讨论】：

【解决方案3】：

这应该工作

 document.getElementById("e1").style['background-color']= "blue";

【讨论】：

【解决方案4】：

给你。您的 HTML 有一点问题

<!doctype html>
<html>
<head>



    <style>
        #e1 {
            background-color: red ;
            width: 400px ;
            height: 200px ;
            margin: 0 auto;

        }
        .wrapper {
            text-align: center;
        }

    </style>


</head>

<body>


    <div id ="e1">
    </div>



    <div class="wrapper">
    <button type = "button" onclick = "myfunction()" style = "width: 100px ; hight: 100px ; position:center ;">Switch</button>
    </div>

    <script type="text/javascript">
        function myfunction() {
            document.getElementById("e1").style.backgroundColor= "blue";
            document.getElementById("e1").style.width = "400px";
            document.getElementById("e1").style.height = "400px";
        }
    </script>
</body>
</html>

两件事。

完成您的按钮标签。它缺少“按钮”之前的初始“
在您的 JavaScript 点击处理程序中将背景颜色更改为背景颜色。

【讨论】：