10

すばらしい Javascript コードを見つけました(StackOverflow リンク:クラスを body タグに追加する方法は? )。しかし、私はそれを実装するのに問題があります。

以下は、テストページで使用しているコードです。

<!doctype html>
<html>
<head>
<title>Javascript Test</title>
<meta charset="utf-8" />

<script type="text/javascript">
var newClass = window.location.href;
newClass = newClass.match(/\/[^\/]+(_|\.)[^\/]+$/);
$(document.body).addClass(newClass);
</script>

</head>
<body>
</body>
</html>

ただし、結果として body タグに追加されたクラスは表示されません。(Safari、Chrome でソースを表示) jQuery を使用した場合と使用しない場合でテストしました。

コードの何が問題なのか分かりますか?

Behance ProSite を使用しています。複数のギャラリーを作成できますが、同じテンプレートを使用しているため、それぞれの背景は同じになります。body タグに一意のクラスを追加して、それぞれを異なる CSS background プロパティでターゲットにできるようにする必要があります。

4

2 に答える 2

21

body タグにクラスを追加するには、いくつかの太いサードパーティ ライブラリを含める必要なく、バニラ Javascript で次のことを行うことができます。

本体にクラスがすでに存在する場合

document.body.className += " something";

さもないと

document.body.className = "something";

jsfiddle の例

ページの読み込みが完了した後にクラスを追加するには、addEventListenerを使用し、 window.onload イベントのハンドラーを作成します。

load イベントは、ドキュメントの読み込みプロセスの最後に発生します。この時点で、ドキュメント内のすべてのオブジェクトが DOM にあり、すべての画像とサブフレームの読み込みが完了しています。

window.addEventListener("load", function () {
    document.body.className = "something";
}, false);
于 2013-05-03T20:43:40.837 に答える