javascriptのスタイル指定？

質問

下記の記述の、「残り」「時間」「分」「秒」にそれぞれスタイルを追加したいです。
-----------------------------
document.tbox01.dspday01.value = "残り"+cnt_hour+"時間"+cnt_min+"分"+cnt_sec+"秒"+cnt_millisec
-----------------------------

イメージとしては、下記のように記述して、
-----------------------------
document.tbox01.dspday01.value = "<span class="hoge01">残り</span>"+cnt_hour+"<span class="hoge02">時間</span>"+cnt_min+"<span class="hoge03">分</span>"+cnt_sec+"<span class="hoge04">秒</span>"+cnt_millisec
-----------------------------
CSSでスタイルを指定したいのですが、可能でしょうか？

回答No.5

tracer

JavaScript以前に、inputのvalueにhtmlを入力することはできません。
厳密に言えば、inputに入力されたhtmlは、htmlではなく単なる文字列として解釈されます。
従って、CSSそのものが使えないのです。

javascriptを使わずに、手作業で
<input value="<span>残り</span>" type="text">
としてみれば、どのように表示されるかわかりますよ。

回答No.4

Ogre7077

要素 FORM で使用する各入力要素の属性 value は、大抵の場合は HTML を受け付けません。
「リッチテキストエディタ」なるJavaScriptライブラリを導入すれば可能でしょうが

なので、表示する場所を要素 div に変更してはいかがでしょう。

<style> #ID名 span { ... } </style>
<div id='ID名'></div>
<script> document.getElementById('ID名').innerHTML = "<span>...</span>"; </script>

回答No.3

passers-by

document.tbox01　というところを見ると、スクリプトの処理結果の出力先として、HTMLの本文側にINPUT要素のtextboxかなにかを設定しているんでしょうから、そちら側にスタイルを設定しておけばよろしいのでは？

補足

みなさま、ご回答ありがとうございます。
説明不足でしたので補足させて頂きます、申し訳ありません。

下記のようなカウントダウンタイマーを作っており、
数字以外の「残り」「時間」「分」「秒」の部分のみ、スタイルを変更したいです。
（つまり【数字】と【「残り」「時間」「分」「秒」】を別々でスタイル指定したい）

※現状、passers-byさんの方法で試しており、
　数字を含む全ての文字にスタイルが効いている状態です。
-----------------------------
<script>
window.onload=showday;
year=2014; //年
mon=3; //月
day=31; //日
time=0; //時
xday = new Date(year,mon-1,day,time,00,00);//基準になる年月日
function showday() {
nowday = new Date();
passtime= xday.getTime()-nowday.getTime();　//今から基準になる日までの経過時間　1/1000秒単位

cnt_day = Math.floor(passtime/(1000*60*60*24));// カウントダウン表示 (日にち) の取得
passtime = passtime -(cnt_day*(1000*60*60)); // 経過秒から(時)を引く

cnt_hour = Math.floor(passtime/(1000*60*60));// カウントダウン表示 (時) の取得
passtime = passtime -(cnt_hour*(1000*60*60)); // 経過秒から(時)を引く

cnt_min = Math.floor(passtime/(1000*60)); // カウントダウン表示 (分) 取得
passtime = passtime -(cnt_min*(1000*60));// 経過秒から(分)を引く

cnt_sec = Math.floor(passtime/1000);// カウントダウン表示 (秒) 取得
passtime = passtime -(cnt_sec*(1000)); // 経過秒から(秒)を引く

cnt_millisec = Math.floor(passtime/10); // カウントダウン表示 (100/1秒) 取得

// 分、秒、ミリ秒を2桁で表示する
if(cnt_min<10){cnt_min = '0' + cnt_min;}
if(cnt_sec<10){cnt_sec = '0' + cnt_sec;}
if(cnt_millisec<10){cnt_millisec = '0' + cnt_millisec;}

if((xday - nowday) > 0){
document.tbox01.dspday01.value = "残り"+cnt_hour+"時間"+cnt_min+"分"+cnt_sec+"秒"+cnt_millisec
}
else {
document.tbox01.dspday01.value = "キャンペーンは終了しました"
}
timerID = setTimeout('showday()', 10);
}
</script>

<style>
.cnt_time01 { border:0; line-height:1.3; height:33px; font-size:28px; font-weight:bold; font-family:Meiryo; width:360px; vertical-align:middle; margin:11px 0 0 575px; }
</style>

<form name="tbox01"><input name="dspday01" type="text" class="cnt_time01"></form>
-----------------------------

どのようにすれば個別でスタイル指定できるのでしょうか…。
よろしくお願い致します。

回答No.2

yambejp

innerHTMLでなくてvalueにタグを代入するの？
なにか勘違いしていませんか？

回答No.1

fujillin

実験してみればすぐにわかると思いますが、もちろん可能です。