JavaScript & jQuery & CSS & HTML の達人

JavaScript と jQuery と CSS と HTML の使い方がわかるブログ

jQueryでボタンが押されるとHTMLソースコードが変更されるスクリプトを作ってみよう

jQueryでボタンが押されるとHTMLソースコードが変更されるスクリプトを作ってみよう。

結果

サンプル

jQuery + JavaScript 

jQuery を使って「botan1」という id をもった <div> 要素がクリックされると、「moji」という id をもった要素の HTML(<div id="moji">変更される部分</div>)が、「ゴルフ」というテキストに置き換わる処理になっている。

また、このスクリプトでは文字列を「Html」として出力しているので、HTMLタグはタグとして認識されて即時デザインに反映される。

なお、「click」イベントはあらかじめ認識させる必要があるため、$(function){ }); の中に入れてページが読み込まれると同時に読ませている。

$(function(){
 $("#botan1").click(function(){
  $("#moji").html("<span style='font-size:36px;color:red'>ゴルフ</span>");
 });
});

CSS

「#botan」はボタンの各スタイルを設定している。「#botan:hover」ではマウスポインターがボタンの上に乗った時にマウスポインターを「手の形」になるようにしている。

<style type="text/css">
<!--
#botan1 {
 font-size: 12px;
 color: #000;
 background-color: #CCC;
 text-align: center;
 width: 100px;
 padding: 3px;
 margin-bottom: 10px;
}
#botan1:hover {
 cursor: pointer;
}
-->
</style> 

HTML 

ボタン用のタグと、文字を表示する場所のタグが必要になる。(※ソースコード中の下線は無視してください) 

<div id="botan1">BUTTON</div>
<div id="moji">フォルクスワーゲン</div>

 

END