2007年03月30日 03:30 [Edit]

javascript+CSS - お手軽もんたメソッド

もんたメソッドも高校の学習指導計画書に乗ったそうですし、ここらで高校生どころか中卒でも簡単にもんたメソッドをお届けするのもよかろうかと思いまして。


実践例

痛いニュース(ノ∀`):【TBS捏造疑惑】 TBS社長ら「不二家報道、捏造というのはどうか」「みの氏の『不二家、廃業しろ』は励ましの言葉」より拝借
みの氏は不二家報道の翌日の番組冒頭で、不二家について「もうはっきり言って、廃業してもらいたい」と言い放っているが、TBSは「『廃業を覚悟して不退転で臨んでください』という励ましの発言だったのでは」としている。

レシピ

  1. まずは以下のCSSを用意しておきます。お好みにあわせてカスタマイズしておいてください。
    <style>
    div.mino  { border: outset 1px; padding: 0.5em; color: #000 }
    span.monta { background-color: #000 }
    </style>
    
  2. 次にもんたメソッドを適用したい文章を<div class="mino">でくるみ、該当部分を<span class="monta">で囲みます。
  3. あとは、以下のScriptを最後に付け加えます。onloadイベントにhookしてもよいでしょう。

    <script>
    function minomonta(){
       var spans = document.getElementsByTagName('span');
       for (var i = 0, l = spans.length; i < l ; i++){
          var span = spans[i];
          if (span.className != 'monta') continue;
          span.setAttribute('title', 'ここをクリックすると...');
          span['onclick'] = function(){ this.style.backgroundColor = "transparent" };
       }
    }
    minomonta();
    </script>
    

ちょっと簡単すぎましたかね。

HTMLもわからないという人は、以下もどうぞ。

Dan the Mino Monter -- Whatever That Means

追記:TBのひろさんとcommentのgSwingさんの添削を反映させました。ありがとうございます。

element['on' + event] = function(){...}は、Crockfordも言っていたのに失念してましたorz。


この記事へのトラックバックURL

この記事へのトラックバック
404 Blog Not Found:javascript+CSS - お手軽...
もんたメソッド【ゴミ箱の中の雑記帳】at 2007年03月30日 23:11
これが小飼弾氏流の格差社会への回答なのか…!! とは思わないけど、例によってIEで動作確認してないみたいなので添削。コメント欄に書こうかと思ったけど改行直してたら長くなりすぎちゃった。自分用メモ兼ね。 404 Blog Not Found:javascript+CSS - お手軽もんたメソッ....
またIEはハブか!!【ひろ式めもちょう】at 2007年03月30日 08:58
この記事へのコメント
まず範囲選択して中身を見た俺は負け組。
Posted by 通りすがり at 2007年04月02日 14:13
うちのFirefoxではちゃんと動作するよ
IEviewでも同じような動作だったから多分ちゃんとだと思うけど。
Posted by へたれ at 2007年03月31日 16:52
これってIE限定ですか?
FireFoxでは動かないみたいですが・・・
Posted by ticzoo at 2007年03月30日 16:45
gSwingさん、
添削ありがとうございます。反映させました。
for (var i = 0, l = elem.length; i < l ; i++){}
は、amachangとmalaの両ハッカーにどこかで教わったように覚えてます。elem.lengthへのアクセスは以外と重いということで、一次変数を用意して格納しているわけですね。
Dan the Careless Javascripter
Posted by at 2007年03月30日 14:23
背景色を指定するときは文字色も一緒に指定するのがベターです。

span.monta { color: #000; background-color: #000; }

ところで素朴な疑問なのですが、
for (var i = 0, l = spans.length; i < l ; i++)
これってあまり見ない書き方なのですが、
for (var i = 0 ; i < spans.length ; i++)
と書くのと比べてメリットあるのかな???
Posted by gSwing at 2007年03月30日 10:28