javascript - Simple Body onload 関数が関数をトリガーしない

Question

body onload 関数でトリガーするこの JavaScript 関数がありますが、動作させることができません。ここで何が間違っていますか？以下は私のフィドルとコードです：

HTML:

<body onload="loading()">
    <div id="container">
    </div>
</body>

JS:

function loading(){   
  document.getElementById('container').css("background-image", "none");
}

も試した

function loading(){   
  document.getElementById('container').cssText = "background-image: none";
}

CSS:

body{
  background: #000;
}
#container {
width: 600px;
height: 500px;
margin:0 auto;
background-image: url("http://lamininbeauty.co.za/images/gallery/loading.png");
background-repeat: no-repeat;
background-position: 50% 50%;
}

score 2 · Accepted Answer

ネイティブのjavascriptとjQueryを混同していますがcss、ネイティブのDOM要素にはメソッドがありません。

function loading(){   
  document.getElementById('container').style.backgroundImage = "none";
}

score 2 · Accepted Answer

試す：

function loading(){   
  document.getElementById('container').style.backgroundImage= "none";
}

score 1 · Accepted Answer

jsがページのセクションにロードされていることを確認してください。

または、追加することしかできません

$(function() {
$('#container').css("background-image", "none");
}

あなたのjsでそして体からonloadを削除します

私はあなたがjqueryを使用していると仮定しています、そうでなければ上記の解決策が行く方法です

score 1 · Accepted Answer

1

function loading(){   
  document.getElementById('container').style.backgroundImage = "none";
}

于 2012-08-23T20:25:13.530 に答える

score 1 · Accepted Answer

getElementByIdmethod を持たない html 要素を返します.css()。そのメソッドを持つそのjQueryは、関数をonloadに持っているので、関数にラップされているため、ラップヘッドが必要ありません。

http://jsfiddle.net/3pDsJ/35/

score 1 · Accepted Answer

問題は、jsfiddle が定義済みの JavaScript を実行するように設定されているため、メソッドが定義される前に属性にonLoad遭遇したと思われることです。コンソールを開くと、「Uncaught ReferenceError: loading is not defined」(または同様のもの) というエラーが表示されます。onload=loading()

それを「ラップなし（ヘッド）」に変更すると、問題なく動作するはずです。前述のように、cssメソッドを実際に機能するものに変更する必要があります。

簡単な解決策は、jquery を使用することだと思います。要素の onload ハンドラーを使用することは、もはや良い習慣とは見なされていません (実際、それらは現在非推奨になっていると思いますか?)。最良の解決策は、実行する js が追加の JavaScript や HTML コードからのメソッド呼び出しを必要としない「控え目な JavaScript」と呼ばれるものです。例を示すためにフィドルを変更しました：

http://jsfiddle.net/3pDsJ/38/

score 0 · Accepted Answer

私がまだ見ていない答えは、script タグは body タグ内にある必要があるというものです。これは、ボディがロードされる前に script タグをロードする必要があるためです。そうしないと、ロード関数が定義されていないというエラーが表示されます。

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="YourCSS.css" />
</head>
<body onload="loading()">
    <div id="container">
    </div>
    <script type="text/javascript">
        function loading(){   
            $("#container").attr("style", "background-image: none;");
        };
    </script>
</body>
</html>

javascript - Simple Body onload 関数が関数をトリガーしない

7 に答える 7

Related

Reference