デフォルトの状態でスタイルを変更したい(JavaScriptです）

メロンパン · #1

お世話になります。
まず、恐れ入ります。下記のソースコードはCではなく、JavaScriptです。
実行すると、マウスを当てた時に「もじもじ」の字体のフォントが変化します。
目的は、実行したらそのままの状態で字体のフォントを24にすることです。
（本来の目的は、CSSをSass,JQueryなどを使わずにJavaScriptでプログラム機能を持たせることです。
例えば、表示画面上で赤白赤白と自動的に色を流したり、貼りつけた画像のサイズを1,2,4,8といった
順番で変化させることです）
長くなりましたが、表示したそのままの状態で、フォントを24に変更する方法を教えていただけると助かります。
宜しくお願い致します。
<code>

コード:

<html>
<head>
<title>スタイルを変更する</title>
<script language="JavaScript"><!--
function setSize(OBJ,n)
{
	OBJ.style.fontSize = n + "px";
}


// --></script>
</head>
<body>
<div href="#" onMouseover="setSize(this,24)" onMouseout="setSize(this,9)">もじもじ</div>
</body>
</html>

#2

24のサイズにすることが出来ていると思いますが何が問題なのでしょうか？
【補足】問題点が明確ではありません。

ISLe · #3

style="font-size:24px"という属性を指定すれば初期状態で24pxになります。
#スタイルシートを使うべきですが。

メロンパン · #4

ご返事どうもありがとうございます。
C言語的にやりたいことを書きますと、

コード:

int i = 1;
int j = 0;
function cssfunc {
for (j = 0; j < 8; j++)
{
font-color:#i++;
font-size:j+"px";
}
}

という形にしたいと考えています。
CSSは知っていますが、CSSにプログラム機能を持たせるには、
Sassという技術が必要で、以下略。

メロンパン · #5

softyaさん、ご指摘あありがとうございます。
24pxにできていましたか、失礼致しました。
この件は仕事上でどうしてもCSSデザインのプログラム化が必要で、
先ほど図書館で一冊だけ借りてきたのですが、あまり。。。

いつもありがとうございます。

#6

メロンパンさんが書きました:ご返事どうもありがとうございます。
C言語的にやりたいことを書きますと、
コード:
int i = 1;
int j = 0;
function cssfunc {
for (j = 0; j < 8; j++)
{
font-color:#i++;
font-size:j+"px";
}
}
という形にしたいと考えています。
CSSは知っていますが、CSSにプログラム機能を持たせるには、
Sassという技術が必要で、以下略。

このコードを示されても目的がよく分かりません。
何をトリガにして、DOMの何処を如何なるルールで色分けやサイズ分けするのか教えてください。
あと、htmlでstyle="font-size:24px"で埋め込んではいけない理由も教えて下さい。

#7

メロンパンさんが書きました:softyaさん、ご指摘あありがとうございます。
24pxにできていましたか、失礼致しました。
この件は仕事上でどうしてもCSSデザインのプログラム化が必要で、
先ほど図書館で一冊だけ借りてきたのですが、あまり。。。

試せば確認できる事項なんですが、パソコンは当然手元にありますよね？
と言うよりも動作を理解されていない気が。

メロンパン · #8

すみません。出直してきます。
面倒でも頑張ってエディタ開いて、疲れない程度に実行してみます。
明日以降に返信いたします。ありがとうございました。

メロンパン · #9

お世話になります。まず、恐れ入りますが、下記のソースコードはCではなく、JavaScriptです。
実行すると、マウスを当てた時に「もじもじ」の字体のフォントが変化します。
これを変化させることなく、デフォルトの状態で、24pxにするにはどうしたら良いでしょうか？
宜しくお願い致します。
※仕事の都合上、理由や面倒な会話には一切お答えできませんので、ご了承下さい。

コード:

<html>
<head>
<title>スタイルを変更する</title>
<script language="JavaScript"><!--
function setSize(OBJ,n)
{
	OBJ.style.fontSize = n + "px";
}

//document.write("setSize(p,24)");
// --></script>
</head>
<body>
<p>aaa</p><br>
<div href="#" onMouseover="setSize(this,24)" onMouseout="setSize(this,9)">もじもじ</div>
</body>
</html>

メロンパン · #10

お願いです。本当にくだらない会話はやめて下さい。
私事情ではありますが、急いでいますので回答を教えて下さい。

bz9 · #11

コード:

<div href="#" onMouseover="setSize(this,24)" onMouseout="setSize(this,9)">もじもじ</div>

これを

コード:

<div href="#" onMouseover="setSize(this,24)" onMouseout="setSize(this,9)" style="font-size:24px;">もじもじ</div>

このようにするのではダメなのですか？

#12

下らなくないですよ、理解しない状況でjavascriptを組んでバグるほうが問題です。
理解することは重要だし動的に操作することは不必要だと思うから私もISLeさんも言っているんです。
onMouseoverイベントも理解できていない状況で組んでもすぐにボロが出ますよ。

事情があるなら私にメール

してください。ほんとうに必要であればお答えします。

#13

bz9 さんが書きました:
コード:
<div href="#" onMouseover="setSize(this,24)" onMouseout="setSize(this,9)">もじもじ</div>
これを
コード:
<div href="#" onMouseover="setSize(this,24)" onMouseout="setSize(this,9)" style="font-size:24px;">もじもじ</div>
このようにするのではダメなのですか？

それだと一度マウスを持って行かないと変化しませんね。

ISLe · #14

質問者さんが何を望んでいるのかを知りたかったのですがくだらない会話でしたか。

ところで、質問者さんが何を望んでいるのか分かった気はするのですが確信がありません。
くだらない会話はしたくないとおっしゃるので確認するすべがありません。

ということでどうしようもないのでわたしはこのスレからは去ります。
さようなら。

メロンパン · #15

天才的プログラマの皆様へ

おはようございます。メロンパンです。
くだらない会話と書いてしまい申し訳ございません。

いま解決できそうな状態にありますので、解決次第、
レスを閉じさせて頂きます。

今後とも宜しくお願い致します。

asd · #16

くだらない横槍で申し訳ありませんが、念押ししておきます。

メロンパンさんが書きました: いま解決できそうな状態にありますので、解決次第、
レスを閉じさせて頂きます。

スレッドを閉じる際には、解決方法をきちんと提示した上で(方法やコードなど)閉じてください。
「うまくいきました、できました、解決しました」だけでスレッドを解決にされてしまうと、
同じような問題で困っている人が見たときに「どうやって解決すればよいのか」がわからなくなりますので
ご協力をお願いします。

メロンパン · #17

ISLe様

メロンパンです。昨日は失礼いたしましたことをお詫び申し上げます。

style="font-size:24px"という属性を指定すれば初期状態で24pxになります。
#スタイルシートを使うべきですが。

という記事に対してあまり注視しておりませんでした。すみません。
どうかこの掲示板から去らないで下さい。

asd様

かしこまりました。解決方法を示した上でスレッドを閉じるようにします。

それにしても今日はいい天気ですね～。

メロンパン · #18

お世話になっております。
どうも私の日本語の説明が下手なようで、お手数おかけしております。
そのため質問を変えます。

「HTMLファイルにJavaScript上で、CSSを記述することは可能でしょうか？」

これを改めて質問としてさせて下さい。

ISLe様がご提案された方法は初期状態でうまく動作しました。
が、CSSは静的な記述なため、動的にフォントを変えるのに適さないと判断したため
ご返事を省略致しました。深くお詫び申し上げます。

以上、宜しくお願い致します。

#19

メロンパンさんが書きました:お世話になっております。
どうも私の日本語の説明が下手なようで、お手数おかけしております。
そのため質問を変えます。

「HTMLファイルにJavaScript上で、CSSを記述することは可能でしょうか？」

これを改めて質問としてさせて下さい。

ISLe様がご提案された方法は初期状態でうまく動作しました。
が、CSSは静的な記述なため、動的にフォントを変えるのに適さないと判断したため
ご返事を省略致しました。深くお詫び申し上げます。

以上、宜しくお願い致します。

cssというかstyleをJavaScriptで変更することは可能です。
ただし、JavaScriptが動作するためのトリガ条件が必要です。
私もISLeさんも、トリガ条件がないのなら静的で良いんじゃないのかと提案しているわけです。

私の聞いたことは2つ有って、
>(1)何をトリガにして、DOMの何処を如何なるルールで色分けやサイズ分けするのか教えてください。
>(2)あと、htmlでstyle="font-size:24px"で埋め込んではいけない理由も教えて下さい。

(2)の答えでしかありませんので、(1)を教えて下さい。

参考としてロード後に24pxにする例をここに載せますが意味のないコードで静的に24pxするのと何ら変わりません。
バグる可能性を考えるとやらないほうがマシです。
この場合、bodyのonLoadがトリガ条件です。

コード:

<html>
<head>
	<title>スタイルを変更する</title>
	<script language="JavaScript"><!--
		function setSize( n )
		{
			var obj = document.getElementById( "moji" );
			obj.style.fontSize = n + "px";
		}
	//--></script>
</head >
<body onLoad="setSize(24)">
	<font id="moji"> もじもじ </font>
</body>
</html>

静的に書いたらこうなりますが、私ならバグの可能性のないこちらを採用します。

コード:

<html>
<head>
	<title>スタイルを静的に変更する</title>
</head >
<body">
	<font style="font-size:24px"> もじもじ </font>
</body>
</html>

メロンパン · #20

お世話になっております。
ご返事遅くなりまして申し訳ありません。
ソースコードを実行させていただいて問題なく動いております。

いま、これを見本に試作しております。
最後には、どこが問題でどのようにして解決したか示しますので、
取り急ぎ失礼致します。

#21

メロンパンさんが書きました:お世話になっております。
ご返事遅くなりまして申し訳ありません。
ソースコードを実行させていただいて問題なく動いております。

いま、これを見本に試作しております。
最後には、どこが問題でどのようにして解決したか示しますので、
取り急ぎ失礼致します。

onLoadはajaxやタイマイベントを起動するために使うべきもので静的なフォントサイズの変更などには使うべきではありませんよ。
そもそも、onLoad/onMouseoverなどトリガとなるイベントやDOMの何たるかを知らずにjavascriptのプログラムを組む事自体が問題だと思いますけどね。

メロンパン · #22

皆様、ご回答ありがとうございました。
解決しましたので、以下、問題点と解決方法について記述いたします。

＜問題点＞
CSSを動的に扱うために、JavaScript上でCSSを操作する方法。

＜解決方法＞
HTML上でトリガーをonLoadに指定し、スタイルにid属性を持たせ、
onLoadに指定された関数をJavaScriptで呼び出すことでスタイルを動的に変更できた。

下記サンプルコード

コード:

<html>
<head>
    <title>スタイルを変更する</title>
    <script language="JavaScript"><!--
        function setSize( n )
        {
            var obj = document.getElementById( "moji" );
            obj.style.fontSize = n + "px";
        }
    //--></script>
</head >
<body onLoad="setSize(24)">
    <font id="moji"> もじもじ </font>
</body>
</html>

#23

結局、イベントドリブンな書き方分かって貰っているのか不安です。
そこはどうなのでしょう？

asd · #24

結局、
・動的にスタイルを変えなくてはならない理由
・静的なスタイル指定ではいけない理由
が不明なままですね。

その辺りの理由を皆さんから問われているのに完全にスルーされているのはなぜでしょうか。

#25

asd さんが書きました:結局、
・動的にスタイルを変えなくてはならない理由
・静的なスタイル指定ではいけない理由
が不明なままですね。

その辺りの理由を皆さんから問われているのに完全にスルーされているのはなぜでしょうか。

この掲示板がコケている間にメールでざっと内容は聞きましたが、onLoadで画像をランダム？にdiv毎に自動的に割り当てたいだけの様です。
そういう意味では質問は大回りだったでしょうね。
本当にonLoadで良いのかは仕様を詳しく知るメロンパンさんのフィルターを通っているので分かりません。

asd · #26

softya（ソフト屋) さんが書きました: この掲示板がコケている間にメールでざっと内容は聞きましたが、onLoadで画像をランダム？にdiv毎に自動的に割り当てたいだけの様です。
そういう意味では質問は大回りだったでしょうね。
本当にonLoadで良いのかは仕様を詳しく知るメロンパンさんのフィルターを通っているので分かりません。

補足ありがとうございました。
なるほど、裏で個別にやりとりをしていたのですね。

ランダムに割り当てるのであれば、動的に切り替える必要もでてきますね。

メロンパン · #27

ご返事遅くなりまして申し訳ありません。
うまく説明できないので、返信が遅れました。

softyaさんには色々お世話になりました。
どうもありがとうございました。（完）

Loki · #28

解決したのに、すみませんが、
http://www.tohoho-web.com/html/div.htm
div要素にhref属性はないです。
何にも使わないなら、付けないでください。
それと、language="JavaScript" は古いので、
<script type="text/javascript">
こっちにして下さい。

コード:

<body>
<p>aaa</p><br>
<div href="#" onMouseover="setSize(this,24)" onMouseout="setSize(this,9)">もじもじ</div>
</body>

body要素の下には、ブロック要素しか書かない方が良いです。
それと、DOCTYPE宣言もないと、JavaScriptに支障をきたしますよ。
仕事なら、なおさら理解が必要では？

メロンパン · #29

Lokiさん

ご指摘ありがとうございます。
divと書かれていたのは、単なる参考例として書かれていただけと思います。
が、実際には使おうとしていました。危ういところでした。

また、ご指摘頂いたポイントのおかげで見事に修繕された気がします。
JavaScriptの宣言がlanguage="JavaScript" は古いので、
<script type="text/javascript">
こっちにして下さい。

これはかなり効きました。正直どちらにしようか迷っていました。

あと、スクリプトはできる限り<head>～</head>内に書くようにします。

また、HTML5では

コード:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
	<title>Title</title>
	
<script type="text/javascript">
<!--

として変換して使わせていただきました。（これだけは自分で頑張って辞書を引いて調べました）
どうも、肝心なアドバイスありがとうございました。

#30

いや、まだ不十分ですよ。
ちゃんと勉強しないと本当にマズイと思います。
「HTML 4.01 Specification (ja)」
http://www.asahi-net.or.jp/~sd5a-ucd/re ... cover.html
どこでも良いのでしっかししているサイトのHTMLソースを参考にするのもよいでしょう。
HTMLやCSSのちゃんとした本を買ったほうが良い気もしますけどね。

beatle · #31

HTML-lintという、HTMLの自動文法チェッカーがありますのでそれで満点を目指してみては。
Another HTML-lint gateway

デフォルトの状態でスタイルを変更したい(JavaScriptです）

デフォルトの状態でスタイルを変更したい(JavaScriptです）

Re: デフォルトの状態でスタイルを変更したい(JavaScriptです）

Re: デフォルトの状態でスタイルを変更したい(JavaScriptです）

Re: デフォルトの状態でスタイルを変更したい(JavaScriptです）

Re: デフォルトの状態でスタイルを変更したい(JavaScriptです）

Re: デフォルトの状態でスタイルを変更したい(JavaScriptです）

Re: デフォルトの状態でスタイルを変更したい(JavaScriptです）

Re: デフォルトの状態でスタイルを変更したい(JavaScriptです）

Re: デフォルトの状態でスタイルを変更したい(JavaScriptです）

Re: デフォルトの状態でスタイルを変更したい(JavaScriptです）

Re: デフォルトの状態でスタイルを変更したい(JavaScriptです）

Re: デフォルトの状態でスタイルを変更したい(JavaScriptです）

Re: デフォルトの状態でスタイルを変更したい(JavaScriptです）

Re: デフォルトの状態でスタイルを変更したい(JavaScriptです）

Re: デフォルトの状態でスタイルを変更したい(JavaScriptです）

Re: デフォルトの状態でスタイルを変更したい(JavaScriptです）

Re: デフォルトの状態でスタイルを変更したい(JavaScriptです）

Re: デフォルトの状態でスタイルを変更したい(JavaScriptです）

Re: デフォルトの状態でスタイルを変更したい(JavaScriptです）

Re: デフォルトの状態でスタイルを変更したい(JavaScriptです）

Re: デフォルトの状態でスタイルを変更したい(JavaScriptです）

Re: デフォルトの状態でスタイルを変更したい(JavaScriptです）

Re: デフォルトの状態でスタイルを変更したい(JavaScriptです）

Re: デフォルトの状態でスタイルを変更したい(JavaScriptです）

Re: デフォルトの状態でスタイルを変更したい(JavaScriptです）

Re: デフォルトの状態でスタイルを変更したい(JavaScriptです）

Re: デフォルトの状態でスタイルを変更したい(JavaScriptです）

Re: デフォルトの状態でスタイルを変更したい(JavaScriptです）

Re: デフォルトの状態でスタイルを変更したい(JavaScriptです）

Re: デフォルトの状態でスタイルを変更したい(JavaScriptです）

Re: デフォルトの状態でスタイルを変更したい(JavaScriptです）

		4月 2024
日	月	火	水	木	金	土
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30