Primary Planet

このページはカテゴリ JavaScript の記事一覧です。


スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

丸裸になってみる

丸裸になって見つめなおしてみることも必要なのでは?とか。

こういうボタンを流行らせることで、CSS の認知度が上がらないかなあとか思うのですが、いかがなものでしょうか。(^^ゞ

ちなみに、私が愛用している Opera では全く動作しないボタンです。念のため。

強引に Opera にも対応させてみるテスト(Mac の方はわかりましぇん)。(^^ゞ

さらに改変しました。やっぱりボタン1つのほうがわかりやすいですもんね。素人スクリプターによるがらくたスクリプト…orz 以下、ボタンの導入方法を書いておきます。

CSS ON/OFF ボタンの導入方法

function cssOnOff(){

    var targetEL = document.getElementsByTagName("link");
    for(i = 0; i < targetEL.length; i++){
        if(targetEL[i].rel == "stylesheet"){
            if(targetEL[i].disabled == false){
                targetEL[i].disabled = true;
            }
            else if(targetEL[i].disabled == true){
                targetEL[i].disabled = false;
            }
        }
    }

}

というスクリプトを適当な名前(拡張子 .js)で保存してアップロード。</head> の直前に

<script type="text/javascript" src="スクリプトのURL"></script>

を追加。そしてボタンを設置したい場所に

<button type="button" onclick="cssOnOff(); return false" onkeypress="cssOnOff(); return false">CSS ON/OFF</button>

と書けば OK。Windows 及び Mac において IE, Firefox, Opera で動作するはずです。Safari では動作しないようです。

Safari でも動作する CSS ON/OFF ボタンの導入方法

(X)HTMLテンプレートで、rel 属性に "stylesheet" が指定されている link 要素に、CSS という名前の id 属性を追加。例えば、

<link href="<%css_link>" type="text/css" rel="stylesheet" media="all" id="CSS" />

という感じ。そして、

var targetEL = document.getElementById("CSS");

function css_off(){
    targetEL.disabled = true;
}

function css_on(){
    targetEL.disabled = false; 
}

というスクリプトを適当な名前(拡張子 .js)で作成しアップロードし、</head> の直前に

<script type="text/javascript" src="スクリプトのURL"></script>

を追加。そしてボタンを設置したい場所に例えば、

<dl>
<dt>CSS</dt>
<dd><button type="button" onclick="css_off(); return false" onkeypress="css_off(); return false">OFF</button>
⇔<button type="button" onclick="css_on(); return false" onkeypress="css_on(); return false">ON</button></dd>
</dl>

と書けば OK。

CSS


Search Form

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。