jQuery利用例：値操作のサンプル

表示サンプルはこちら
http://jsdo.it/goto_jp/oovM

値の表示・取得はJavaScriptを使ったUI操作の基礎中の基礎です。
CSSができる人ならばstyle属性やクラス名操作が出来てしまえば、表示はどのようにでも操作できます。

jQueryを使うと値の取得も楽になります。

JavaScript

$(function(){
    //boxのstyle属性をアラート表示
    $(".switch_attr").click(function(){
        alert($(".box").attr("style"));    //attrに属性のみ入れると属性値を返す
    });

    //boxのalignを書き換える
    $(".switch_attrset").click(function(){
        $(".box").attr("align","right");    //attrに属性,引数を指定すると書き換える
    });

    //box内のテキストをアラート表示
    $(".switch_text").click(function(){
        alert($(".box").text());    //textは引数を入れなければ現在値を返す
    });

    //box内のテキストを書き換える
    $(".switch_textset").click(function(){
        $(".box").text("書き換えました。");    //textは引数を入れると値を書き換える
    });

    //box内inputのvalue値をアラート表示
    $(".switch_val").click(function(){
        alert($(".box input").val());    //valは引数を入れなければ現在値を返す
    });

    //box内inputのvalue値を12345に書き換える
    $(".switch_valset").click(function(){
        $(".box input").val(12345);    //valは引数を入れると値を書き換える
    });
});

HTMLは簡易なものなのでサンプルを参照してください。
「switch_attr」など各ボタンクラスに対応したアクションを返しています。