So-net無料ブログ作成
検索選択

【JavaScript】テーブルのセルの色の変更 [JavaScript]

Webページのテーブルにおいて、フォントカラーや背景色、枠線の色の変更はどのように行うのでしょうか。静的にはCSSを用いて設定できますね。ただ、ユーザの入力内容や属性に応じて動的に変更したい場合もありますね。そのような場合は、JavaScriptを用いて変更することが出来ます。

1. フォントカラーの変更
2. 背景色の変更
3. 枠線の色の変更



スポンサードリンク



1. フォントカラーの変更
// 行の取得
var row = document.getElementById("tableId").rows.item(0);
// セルの取得
var cell = row.cells.item(-1);
// フォントカラーの変更
cell.style.color = "white";

    セルのフォントカラーを変更する場合は、上記の例のようにstyle.colorに色を設定します。
    色には"white"のようにカラー名も使用できますし、"#FFFFFF"のような
    16進カラーコードも使用できます。
    ちなみに、CSSではフォントカラーはcolor: #FFFFFF; のように設定します。


2. 背景色の変更
// 行の取得
var row = document.getElementById("tableId").rows.item(0);
// セルの取得
var cell = row.cells.item(-1);
// 背景色の変更
cell.style.backgroundColor = "#A52A2A";

    セルの背景色を変更する場合は、上記の例のようにstyle.backgroundColorに
    色を設定します。
    色には"brown"のようにカラー名も使用できますし、"#A52A2A"のような
    16進カラーコードも使用できます。
    ちなみに、CSSでは背景色はbackground-color: #A52A2A; のように設定します。

3. 枠線の色の変更
// 行の取得
var row = document.getElementById("tableId").rows.item(0);
// セルの取得
var cell = row.cells.item(-1);
// 枠線の色の変更
cell.style.borderColor = "#C71585";

    セルの枠線の色を変更する場合は、上記の例のようにstyle.borderColorに色を設定します。
    色には"MediumVioletRed"のようにカラー名も使用できますし、"#C71585"のような
    16進カラーコードも使用できます。
    ちなみに、CSSでは枠線の色はborder-color: #C71585; のように設定します。



【⇒】 関連記事

テーブルに関する操作については、下記に目次を作成しました。こちらも合わせてご参照ください。
【JavaScript】テーブルの操作の方法


スポンサードリンク


nice!(0)  コメント(0)  トラックバック(0) 
共通テーマ:パソコン・インターネット

nice! 0

コメント 0

コメントを書く

お名前:
URL:
コメント:
画像認証:
下の画像に表示されている文字を入力してください。

※ブログオーナーが承認したコメントのみ表示されます。

トラックバック 0