下記の記述の、「残り」「時間」「分」「秒」にそれぞれスタイルを追加したいです。
-----------------------------
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でスタイルを指定したいのですが、可能でしょうか?
A 回答 (5件)
- 最新から表示
- 回答順に表示
No.5
- 回答日時:
JavaScript以前に、inputのvalueにhtmlを入力することはできません。
厳密に言えば、inputに入力されたhtmlは、htmlではなく単なる文字列として解釈されます。
従って、CSSそのものが使えないのです。
javascriptを使わずに、手作業で
<input value="<span>残り</span>" type="text">
としてみれば、どのように表示されるかわかりますよ。
No.4
- 回答日時:
要素 FORM で使用する各入力要素の属性 value は、大抵の場合は HTML を受け付けません。
「リッチテキストエディタ」なるJavaScriptライブラリを導入すれば可能でしょうが
なので、表示する場所を要素 div に変更してはいかがでしょう。
<style> #ID名 span { ... } </style>
<div id='ID名'></div>
<script> document.getElementById('ID名').innerHTML = "<span>...</span>"; </script>
No.3
- 回答日時:
document.tbox01 というところを見ると、スクリプトの処理結果の出力先として、HTMLの本文側にINPUT要素のtex
tboxかなにかを設定しているんでしょうから、そちら側にスタイルを設定しておけばよろしいのでは?この回答への補足
みなさま、ご回答ありがとうございます。
説明不足でしたので補足させて頂きます、申し訳ありません。
下記のようなカウントダウンタイマーを作っており、
数字以外の「残り」「時間」「分」「秒」の部分のみ、スタイルを変更したいです。
(つまり【数字】と【「残り」「時間」「分」「秒」】を別々でスタイル指定したい)
※現状、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>
-----------------------------
どのようにすれば個別でスタイル指定できるのでしょうか…。
よろしくお願い致します。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSSのホバーエフェクト 1 2023/06/19 06:53
- PHP ランキングを表示する際の画像の大きさを固定することは可能でしょうか? <?php if ( has_ 1 2022/07/21 14:55
- JavaScript htmlとcssで分数を表示後、分数の右側に文書を書きたい 1 2022/04/28 10:09
- HTML・CSS 分数が正常に表示されない。 6 2022/05/09 18:53
- Visual Basic(VBA) 配列の勉強をしています。使用する変数の意味、検索条件の書き方が難しいです。 2 2022/09/15 14:06
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- その他(プログラミング・Web制作) pythonのWebスクレイピングでfind_allだとurlがNoneに 4 2022/04/17 18:21
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
onchangeイベントを強制的に発...
-
formのfileの値をhiddenでも持...
-
JavascriptでDOM-based XSSの発...
-
クリックさせたいが、click()が...
-
VB.NETで<Input>タグ、<text...
-
javaScriptの変数をJavaの変数...
-
追加ボタンを押した際に ok ボ...
-
親ウィンドウのフォームの値を変更
-
vbscriptでIE自動入力(コンボ...
-
onclickが動作しない
-
オンクリックで現在時刻の取得→...
-
ボタンかリンクをクリックする...
-
JavaScriptのfileオブジェクト...
-
innerHTML内では改行は禁止?
-
JSやVBSで、ボタンを押す...
-
マウスをブラウザの外に出した...
-
正規表現で複数マッチ条件で悩...
-
return trueとreturn falseの用...
-
【jsp/Java】チェックボックス...
-
リストボックス内の重複したも...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
onchangeイベントを強制的に発...
-
JavascriptでDOM-based XSSの発...
-
onclickが動作しない
-
クリックさせたいが、click()が...
-
追加ボタンを押した際に ok ボ...
-
innerHTML内では改行は禁止?
-
ボタンかリンクをクリックする...
-
formのfileの値をhiddenでも持...
-
javaScriptの変数をJavaの変数...
-
JavaScriptのfileオブジェクト...
-
VB.NETで<Input>タグ、<text...
-
受け取ったパラメータが文字化け
-
JQueryでfunctionに引数としてI...
-
javascriptで作成されたテーブ...
-
jQueryで設定したイベントハン...
-
開いた子ウィンドウにあるボタ...
-
コードレビューをお願いします。
-
ボタンをクリックするとテキス...
-
BackSpaceしたい(QNo.2734284の...
-
URL 判定
おすすめ情報