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

フォーラム(掲示板)ルール
フォーラム(掲示板)ルールはこちら  ※コードを貼り付ける場合は [code][/code] で囲って下さい。詳しくはこちら
メロンパン

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

#1

投稿記事 by メロンパン » 7年前

お世話になります。
まず、恐れ入ります。下記のソースコードは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>

アバター
softya(ソフト屋)
副管理人
記事: 11677
登録日時: 9年前
住所: 東海地方
連絡を取る:

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

#2

投稿記事 by softya(ソフト屋) » 7年前

24のサイズにすることが出来ていると思いますが何が問題なのでしょうか?
【補足】問題点が明確ではありません。
by softya(ソフト屋) 方針:私は仕組み・考え方を理解して欲しいので直接的なコードを回答することはまれですので、すぐコードがほしい方はその旨をご明記下さい。私以外の方と交代したいと思います(代わりの方がいる保証は出来かねます)。

ISLe
記事: 2645
登録日時: 9年前
連絡を取る:

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

#3

投稿記事 by ISLe » 7年前

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

メロンパン

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

#4

投稿記事 by メロンパン » 7年前

ご返事どうもありがとうございます。
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という技術が必要で、以下略。

メロンパン

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

#5

投稿記事 by メロンパン » 7年前

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

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

アバター
softya(ソフト屋)
副管理人
記事: 11677
登録日時: 9年前
住所: 東海地方
連絡を取る:

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

#6

投稿記事 by softya(ソフト屋) » 7年前

メロンパン さんが書きました:ご返事どうもありがとうございます。
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"で埋め込んではいけない理由も教えて下さい。
by softya(ソフト屋) 方針:私は仕組み・考え方を理解して欲しいので直接的なコードを回答することはまれですので、すぐコードがほしい方はその旨をご明記下さい。私以外の方と交代したいと思います(代わりの方がいる保証は出来かねます)。

アバター
softya(ソフト屋)
副管理人
記事: 11677
登録日時: 9年前
住所: 東海地方
連絡を取る:

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

#7

投稿記事 by softya(ソフト屋) » 7年前

メロンパン さんが書きました:softyaさん、ご指摘あありがとうございます。
24pxにできていましたか、失礼致しました。
この件は仕事上でどうしてもCSSデザインのプログラム化が必要で、
先ほど図書館で一冊だけ借りてきたのですが、あまり。。。
試せば確認できる事項なんですが、パソコンは当然手元にありますよね?
と言うよりも動作を理解されていない気が。
by softya(ソフト屋) 方針:私は仕組み・考え方を理解して欲しいので直接的なコードを回答することはまれですので、すぐコードがほしい方はその旨をご明記下さい。私以外の方と交代したいと思います(代わりの方がいる保証は出来かねます)。

メロンパン

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

#8

投稿記事 by メロンパン » 7年前

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

メロンパン

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

#9

投稿記事 by メロンパン » 7年前

お世話になります。まず、恐れ入りますが、下記のソースコードは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>

メロンパン

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

#10

投稿記事 by メロンパン » 7年前

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

bz9

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

#11

投稿記事 by bz9 » 7年前

コード:

<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>
このようにするのではダメなのですか?

アバター
softya(ソフト屋)
副管理人
記事: 11677
登録日時: 9年前
住所: 東海地方
連絡を取る:

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

#12

投稿記事 by softya(ソフト屋) » 7年前

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

事情があるなら私にメール画像してください。ほんとうに必要であればお答えします。
by softya(ソフト屋) 方針:私は仕組み・考え方を理解して欲しいので直接的なコードを回答することはまれですので、すぐコードがほしい方はその旨をご明記下さい。私以外の方と交代したいと思います(代わりの方がいる保証は出来かねます)。

アバター
softya(ソフト屋)
副管理人
記事: 11677
登録日時: 9年前
住所: 東海地方
連絡を取る:

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

#13

投稿記事 by softya(ソフト屋) » 7年前

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>
このようにするのではダメなのですか?
それだと一度マウスを持って行かないと変化しませんね。
by softya(ソフト屋) 方針:私は仕組み・考え方を理解して欲しいので直接的なコードを回答することはまれですので、すぐコードがほしい方はその旨をご明記下さい。私以外の方と交代したいと思います(代わりの方がいる保証は出来かねます)。

ISLe
記事: 2645
登録日時: 9年前
連絡を取る:

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

#14

投稿記事 by ISLe » 7年前

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

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

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

メロンパン

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

#15

投稿記事 by メロンパン » 7年前

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

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

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

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

アバター
asd
記事: 318
登録日時: 9年前

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

#16

投稿記事 by asd » 7年前

くだらない横槍で申し訳ありませんが、念押ししておきます。
メロンパン さんが書きました: いま解決できそうな状態にありますので、解決次第、
レスを閉じさせて頂きます。
スレッドを閉じる際には、解決方法をきちんと提示した上で(方法やコードなど)閉じてください。
「うまくいきました、できました、解決しました」だけでスレッドを解決にされてしまうと、
同じような問題で困っている人が見たときに「どうやって解決すればよいのか」がわからなくなりますので
ご協力をお願いします。
Advanced Supporting Developer
無理やりこじつけ(ぉ

メロンパン

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

#17

投稿記事 by メロンパン » 7年前

ISLe様

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

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

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


asd様

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

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

メロンパン

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

#18

投稿記事 by メロンパン » 7年前

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

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

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

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

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

アバター
softya(ソフト屋)
副管理人
記事: 11677
登録日時: 9年前
住所: 東海地方
連絡を取る:

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

#19

投稿記事 by softya(ソフト屋) » 7年前

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

「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>
by softya(ソフト屋) 方針:私は仕組み・考え方を理解して欲しいので直接的なコードを回答することはまれですので、すぐコードがほしい方はその旨をご明記下さい。私以外の方と交代したいと思います(代わりの方がいる保証は出来かねます)。

メロンパン

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

#20

投稿記事 by メロンパン » 7年前

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

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

アバター
softya(ソフト屋)
副管理人
記事: 11677
登録日時: 9年前
住所: 東海地方
連絡を取る:

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

#21

投稿記事 by softya(ソフト屋) » 7年前

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

いま、これを見本に試作しております。
最後には、どこが問題でどのようにして解決したか示しますので、
取り急ぎ失礼致します。
onLoadはajaxやタイマイベントを起動するために使うべきもので静的なフォントサイズの変更などには使うべきではありませんよ。
そもそも、onLoad/onMouseoverなどトリガとなるイベントやDOMの何たるかを知らずにjavascriptのプログラムを組む事自体が問題だと思いますけどね。
by softya(ソフト屋) 方針:私は仕組み・考え方を理解して欲しいので直接的なコードを回答することはまれですので、すぐコードがほしい方はその旨をご明記下さい。私以外の方と交代したいと思います(代わりの方がいる保証は出来かねます)。

メロンパン

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

#22

投稿記事 by メロンパン » 7年前

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

<問題点>
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>

アバター
softya(ソフト屋)
副管理人
記事: 11677
登録日時: 9年前
住所: 東海地方
連絡を取る:

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

#23

投稿記事 by softya(ソフト屋) » 7年前

結局、イベントドリブンな書き方分かって貰っているのか不安です。
そこはどうなのでしょう?
by softya(ソフト屋) 方針:私は仕組み・考え方を理解して欲しいので直接的なコードを回答することはまれですので、すぐコードがほしい方はその旨をご明記下さい。私以外の方と交代したいと思います(代わりの方がいる保証は出来かねます)。

アバター
asd
記事: 318
登録日時: 9年前

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

#24

投稿記事 by asd » 7年前

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

その辺りの理由を皆さんから問われているのに完全にスルーされているのはなぜでしょうか。
Advanced Supporting Developer
無理やりこじつけ(ぉ

アバター
softya(ソフト屋)
副管理人
記事: 11677
登録日時: 9年前
住所: 東海地方
連絡を取る:

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

#25

投稿記事 by softya(ソフト屋) » 7年前

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

その辺りの理由を皆さんから問われているのに完全にスルーされているのはなぜでしょうか。
この掲示板がコケている間にメールでざっと内容は聞きましたが、onLoadで画像をランダム?にdiv毎に自動的に割り当てたいだけの様です。
そういう意味では質問は大回りだったでしょうね。
本当にonLoadで良いのかは仕様を詳しく知るメロンパンさんのフィルターを通っているので分かりません。
by softya(ソフト屋) 方針:私は仕組み・考え方を理解して欲しいので直接的なコードを回答することはまれですので、すぐコードがほしい方はその旨をご明記下さい。私以外の方と交代したいと思います(代わりの方がいる保証は出来かねます)。

アバター
asd
記事: 318
登録日時: 9年前

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

#26

投稿記事 by asd » 7年前

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

ランダムに割り当てるのであれば、動的に切り替える必要もでてきますね。
Advanced Supporting Developer
無理やりこじつけ(ぉ

メロンパン

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

#27

投稿記事 by メロンパン » 7年前

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

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

Loki
記事: 22
登録日時: 7年前

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

#28

投稿記事 by Loki » 7年前

解決したのに、すみませんが、
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に支障をきたしますよ。
仕事なら、なおさら理解が必要では?

メロンパン

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

#29

投稿記事 by メロンパン » 7年前

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">
<!--
として変換して使わせていただきました。(これだけは自分で頑張って辞書を引いて調べました)
どうも、肝心なアドバイスありがとうございました。

アバター
softya(ソフト屋)
副管理人
記事: 11677
登録日時: 9年前
住所: 東海地方
連絡を取る:

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

#30

投稿記事 by softya(ソフト屋) » 7年前

いや、まだ不十分ですよ。
ちゃんと勉強しないと本当にマズイと思います。
「HTML 4.01 Specification (ja)」
http://www.asahi-net.or.jp/~sd5a-ucd/re ... cover.html
どこでも良いのでしっかししているサイトのHTMLソースを参考にするのもよいでしょう。
HTMLやCSSのちゃんとした本を買ったほうが良い気もしますけどね。
by softya(ソフト屋) 方針:私は仕組み・考え方を理解して欲しいので直接的なコードを回答することはまれですので、すぐコードがほしい方はその旨をご明記下さい。私以外の方と交代したいと思います(代わりの方がいる保証は出来かねます)。

beatle
記事: 1280
登録日時: 8年前
住所: 埼玉
連絡を取る:

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

#31

投稿記事 by beatle » 7年前

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

閉鎖

“C言語何でも質問掲示板” へ戻る