ボディタグにクラスを追加する：結果のない既存のJavascriptソリューションをテストする

JavaScriptのコード（StackOverflowリンク：How to add a class to body tag?）の大きな部分が見つかりました。しかし、私はそれを実装するのに問題があります。以下はボディタグにクラスを追加する：結果のない既存のJavascriptソリューションをテストする

は、私がテストページで使用しているコードです：

<!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の背景プロパティでターゲット設定することができます。

出典

2013-05-03 user2347736

jQueryがページに含まれていることを確認してください。 – dinjas

迅速な対応をありがとう。 ''を追加し、Javascriptの最後の行を '$（ 'body'）に置き換えました。addClass （newClass）;そしてまだ結果はありません。 – user2347736

あなたのスクリプトの前にjquery *を参照する必要があります – enb081

このコードのカップルマイナーな問題があります：

はmatchで正規表現が実際にあなたのURLパターンに一致することを確認してください。私はBehance Prositesが/1234/sectionと/1234/5678/section/itemのようなURLパターンを使用していると思います。
match関数は配列を返しますので、newClassをaddClassに直接渡すことはできません。 newClass[0]のような配列項目の1つを渡す必要があります。
スクリプトは<head>にありますので、実行時には存在しないため、<body>は変更できません。スクリプトをページの最下部に移動するか、DOMがロードされるまで実行を延期する必要があります。

このスニペットはBehavity Prosites専用です。正規表現は、URLパスセグメントと少なくとも1つの非数値文字を一致させて、URLから/1234/5678/を除外します。したがって、上記のURLの例では、newClass[0]はsectionになります。

$(document).ready(function() { 
    var path = window.location.pathname; 
    var newClass = path.match(/[^\/]*[^\d\/][^\/]*/); 
    $('body').addClass(newClass[0]); 
});

幸運！

出典

2013-05-04 18:49:00

これは私のために働いた！マットありがとう！ – user2347736

bodyタグにクラスを追加するには、クラスがすでに

document.body.className += " something";

その後、体に存在する場合、いくつかの脂肪サードパーティのライブラリ

を含める必要がなくバニラJavaScriptで次の操作を行うことができます

そうでない場合は

document.body.className = "something";

例jsfiddle上

クラスは、ページの読み込みが完了した後に、その後addEventListenerを使用すると、ドキュメントのロード処理の最後にwindow.onload event

ロードイベント火災のためのハンドラを作成する追加されています。には、ドキュメント内のすべてのオブジェクトがDOM内にあり、すべてのイメージとサブフレームの読み込みが完了しています。

window.addEventListener("load", function() { 
    document.body.className = "something"; 
}, false);

出典

2013-05-03 20:43:40 Xotic750

意味がありますが、まだ私にとってはうまくいきません（ChromeとSafari）、これは私が何か行方不明の場合に使う行です： '<！doctype HTML> Javascriptのテスト <メタのcharset = "UTF-8" /> ます。 ' – user2347736

私は私の例で実証ようonloadイベントリスナーを実装します。 – Xotic750

最新のブラウザでクラス名を削除するには、 document.querySelector（ 'body'）を使用できます。classList.remove（ 'something'）; クラス名は大文字と小文字が区別されます – phil

ボディタグにクラスを追加する：結果のない既存のJavascriptソリューションをテストする

答えて

関連する問題