Wataame Frog Labo

jQueryで使用ブラウザを判定し、ブラウザ別にclassを指定する

このページはブログ『Wataame Frog』の「ブラウザごとに異なるCSSのclassを付与する仕組みをjQueryで作ってみた」という記事のサンプルです。
記事URL : https://nodoame.net/archives/5378/

jquery.tgAddBrowserClass デモ

閲覧しているブラウザによって、以下のサンプルテキストの文字色が変更されます。

アギーレジャパンが「国内６連戦」を経て来年１月のアジア杯（オーストラリア）に出陣することが２３日、分かった。 関係者によれば開催地が未定だった１０月１０、１４日の連戦は新潟、埼玉で開催されることが決定的。 また日本サッカー協会の大仁邦弥会長（６９）は新監督就任が間近となっているハビエル・アギーレ氏（５５）との交渉は順調と話しており、 ２４日の理事会後にも発表される可能性がある。(スポニチアネックス)

デモ例（画像）

IE11 IE10
Chrome Firefox

結果例（HTMLソース）

使い方

ヘッダ記述

HTMLヘッダー中に以下の行を記述。
スクリプト本体を読み込ませれば、実行されます。

<script src="./jquery.tgAddBrowserClass.js"></script>

CSS

ブラウザ別用にCSSを作成

<style>
p.message {

color: #000;
}

.ie p.message {
color: PINK;
}

.ie10_0 p.message {
color: #008b8b;
}

.ie11_0 p.message {
color: #9acd32;
}

.firefox p.message {
color: #a0522d;
}

.chrome p.message {
color: ORANGE;
}
</style>