Question

当我点击按钮时，我正在尝试更改条形的宽度;但它不起作用。我试过复制代码，替换ID并重写代码，但我不知道为什么它不起作用。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=8,IE=9" />
        <title>Page Title</title>
        <script type="text/javascript">
            var bar = document.getElementById("Bar");
            function load(){
                bar.style.width = "500px;";
            }
        </script>
        <link rel="stylesheet" type"text/css" href="Style.css">
    </head>
    <body>
        <div id="mainwrapper">
            Citadel goal
            <div id="Shell">
                <div id="Bar"></div>
            </div>
            <form><input type="button" value ="click" onclick="load();"/></form>
        </div>
    </body>
</html>

Answer 1

两个问题：

您尝试在Bar元素存在之前检索它，因此您的bar变量为null。将getElementById调用移至 load函数，这样您就不会在元素存在之前尝试获取元素。

样式值不应包含;。 E.g：

bar.style.width = "500px;";
// Remove this ---------^

工作示例：Live Copy

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">
        function load() {
            var bar = document.getElementById("Bar");
            bar.style.width = "500px";
        }
    </script>
    <!-- Your stylesheet was here, replaced with this since
         we don't have your stylesheet -->
    <style>
        #Bar {
            border: 1px solid #aaa;
        }
    </style>
</head>
<body>
    <div id="mainwrapper">
        Citadel goal
        <div id="Shell">
            <!-- Note: I added something to the div as otherwise it
                 had no height; presumably your stylesheet gives it height -->
            <div id="Bar">x</div>
        </div>

        <form>
            <input type="button" value="click" onclick="load();" />
        </form>
    </div>
</body>
</html>

Answer 2

你的功能应该是这样的;

function load(){
var bar = document.getElementById("Bar");
bar.style.width = "500px";
}

原因是初始化属性dosent知道如果你在函数之外执行它会包含"bar"包含什么，所以你总是在函数内定义它。

Answer 3

初始化条变量到加载方法而不是外部。

function load() {
    document.getElementById("Bar").style.width = "500px";
}

尝试以上代码。

使用Javascript更改CSS样式

3 个答案: