ボタンやフォームの上下位置がずれたとき 他

ボタンやフォームの上下位置がずれたとき

二種類のボタンやフォームを並べていたとき、

marginやheightの値が同じなのに上下位置がずれたので、どうしたものかな、と調べた結果、

両方のstyleに

vertical-align: middle;

を足して解決。上下を揃えたい部分でvertical-alignの値が揃っていれば、別に

middleでなくてtopでも可。

クリックしたらボタンの色や表示を変更したい

cssで状態に相当する表示のclassを用意しておく→JavaScriptでclassNameを変更。

たとえばクリックしたら状態が変化して、それに応じてボタンの表示を変えたいとき、

あらかじめcssに

.class1{

    background-color: #F00;

}

.class2{

    background-color: #FF0;

}

と用意して、ボタンの要素に

class="class1" value = "state1" onClick = "change(this)"

を追加。valueに状態に対応する値を指定。

そして、JavaScriptの関数change()の方で、

function change(button){

   if(button.value="state1"){

    button.value="state2"

    button.className = "class2";

   }else if(button.value="state2"){

   button.value="state1"

   button.className = "class1";

   }

}

とすると、クリックするとぽんぽんボタン表示が切り替わる。

classNameで状態分岐するようにするとvalueは別に指定しなくていいのですが、他の部分の表示用に複数classを指定している場合が面倒くさくなる気がしたのと

ボタンクリックで入力値変化→あとでその結果を読み取り→データ格納用の配列を作る、みたいなことを考えていたので、valueにその配列に入れる形式の値を入れておけば便利かな、と。

あと、

cssは(他のスクリプトも大体そうであると思われるけど)上から順に読み込まれていき、プロパティの中の指定されている項目がかぶった場合は、下にあるほうの値で上書きしていきます。

そのため、クラスを追加する形で表示を変更する場合はクラスのプロパティを書く順番に注意しないと反映されないので少し気をつけたほうがいいかも……。

画像やボタンをクリックしても何も起こらないようにしたい

ボタンのデザインを流用して説明したいけど、マウスをのせたときなどのカーソル変化やクリックした際のふちの表示の変化がいらない場合、どうしようかな、となりまして、

とりあえず、demoあたりの名前のclassを一つ追加して、

demo{

    pointer-events: none;

}

としておけば動かなくなります。

demoは本来の表示や動作用のセレクタより下の方で書くこと。

あと、これを指定すると下のtytleも動かなくなるので、

結局

cursor: auto;

にしてボタンの上にカーソルもって行ってもカーソルを変化させないぐらいにしました。

 マウスをのせたら説明文を表示させたい

要素の属性に

tytle="説明文"

を追加する。