.styleがうまくいきません。

質問

.styleがうまくいきません。

var debu = mathGetClass.style.position = 'fixed';
mathGetClass.style.position = 'top mathRandom + px';
mathGetClass.style.position = 'left mathRandom + px';
console.log(debu);

としてもdebuの中身がfixedになってしまいます。
また、複数のCSSを一括指定したい場合は、
連想配列を使うのでしょうか？

https://codepen.io/anon/pen/QpKzPR?editors=1111

回答No.3

superside0 · ベストアンサー

> position　fixedとして変数に代入したかったのですが、
>その場合は具体的にどうすればよかったのでしょうか？
>そしてそうならない理由はなぜなのでしょうか？

たとえば
a=1;
a=2;
a=3;
colsole.log(a);
としたとき、1,2,3の合計の6ではなく3がconsole出力されますが、それはわかりますよね。

同じく
mathGetClass.style.position = 'fixed';
mathGetClass.style.position = 'top' + mathRandom + 'px';
mathGetClass.style.position = 'left' + mathRandom + 'px';
とすると、mathGetClass.style.position に入ってるのは、
最後のだけです。

position, top, leftにそれぞれの値を確保したいなら、それ用のプロパティに対してセットするように
mathGetClass.style.position = 'fixed';
mathGetClass.style.top = mathRandom + 'px';
mathGetClass.style.left = mathRandom + 'px';
です。

お礼

でしたね、左が同じだとただの再代入になるという事でしたね。

回答No.2

superside0

１）
イコールの優先度とかは、この話では関係ありません。

> var debu = mathGetClass.style.position = 'fixed';
>mathGetClass.style.position = 'top mathRandom + px';
> mathGetClass.style.position = 'left mathRandom + px';
> console.log(debu);
> としてもdebuの中身がfixedになってしまいます。

となるのは、なぜかという御質問に対して、
debuへ代入しているのは１行目だけで、
２行目と３行目ではdebuは変更していなのだから、最後のcolsole.log(debu);としたら
１行目でdebu変数に代入した値のが出てくるだけ
という回答をしたつもりでした。

つまり、
１行目では、mathGetClass.style.positionに入れた'fixed'というその時点の値を
別の　debuという変数へ値をコピーしているますが、
２行目でそのコピー元のmathGetClass.style.positionを変更しても
コピー先のdebuの中身は変更される訳ではありません。ということです。

ただし、余計混乱させるかもしれませんが、今回は１行目でdebu変数へ値をコピーしていますが、
debu = ～　の　右辺が配列だったりオブジェクトだった場合は”参照渡し”になるのでこの場合は別です。

２）
> 文字列として値を渡すからといって、その値をひとつづつ文字列にしないとcssの値として認識せず、
> 別の物と認識してしまうのですね。

違います。　
CSSに限った話ではなく、プログラミングにおける文字列と変数の取り扱いの問題です。
～ = '…変数名…'　のように　　変数名を ' 'で囲んでいたのでは、
'…変数名…'という文字列そのものを代入しているだけになってしまいます。
また、文字列連結の+演算子も、 '　'の外にないと、単に　+をいう文字をそのまま使ってしまうだけになります。

たとえば
var a= 1;
var b = 'a+2';
alert(b);
とすると、「a+2」と表示されます。
この２行目をvar b = a + 2;とすれば「3]になります。

これと同じで、　変数名の中身をとりだして、それを文字列の一部に使いたいなら、
変数名を　'　' の外に出す必要があります。例えば
var a= 10;
var b = 'a + px';
alert (b);　
だと、 「a + px」　と表示されてしまいますので、 「10px」と表示させたいなら
２行目は正しくは、　var b = a + 'px';　　です。

> 複数のCSSのプロパティと値を当てることを想定していたのですが、

すみませんが、意味が理解できません。

もし、異なるクラス名であっても、特定のタグ名のプロパティーを全部ということなら
クラス名を指定する方法でなく、タグ名を指定する方法を使えばよいです。

お礼

var debu = mathGetClass.style.position = 'fixed';

がなぜ、fixedが
mathGetClass.style.position
に代入されて、その後
var debu
に代入されないかが謎です。

position　fixedとして変数に代入したかったのですが、
その場合は具体的にどうすればよかったのでしょうか？
そしてそうならない理由はなぜなのでしょうか？

また、ちょっと混乱しているのですが、
下記はmathGetClass.style.positionという変数に再代入したいのではなく、
三つのpositionプロパティにそれぞれの値を付けて、
cssのpositionをjsで使いたかったという事です。
恐らくこれは伝わっていると思いますが、
下記の書き方で、cssを三つ当てられますよね。
ただ同じ要素に充てるのに三つ同じ要素を書くのはよろしくないので、
値だけを連想配列にすれば三つ書かなくてもいいかと思った次第です。

mathGetClass.style.position = 'fixed';
mathGetClass.style.position = 'top mathRandom + px';
mathGetClass.style.position = 'left mathRandom + px';

・つまりこれで良いという事ですよね。
mathGetClass.style.position = 'fixed';
mathGetClass.style.position = 'top' + mathRandom + 'px';
mathGetClass.style.position = 'left' + mathRandom + 'px';
https://codepen.io/anon/pen/BWpmzB?editors=1111

＞＞＞
すみませんが、意味が理解できません。

もし、異なるクラス名であっても、特定のタグ名のプロパティーを全部ということなら
クラス名を指定する方法でなく、タグ名を指定する方法を使えばよいです。

同じ要素に複数のCSSを当てるという事です。
.a　{
color:red;
backrgound-color:red;
}
これをJSで行うという事です。

回答No.1

superside0

問題は３つあって、

１）
debu = mathGetClass.style.position = 'fixed';
の行では、 =での代入が２つあるので、　'fixed'という文字列が
debu変数にも、～.positionプロパティーにも代入されますが

mathGetClass.style.position = 'top mathRandom + px';
の行では debuには代入されていないので、
debu変数の中身は、そのまえの状態のままです。（'fixed'のまま）
このため、console.log(debu);では'fxed'になります。

２）
～ = 'top mathRandom + px'
としても、このままの文字列を代入しているだけです。
多分、やりたいのは、例えばmathRandon変数の中身が 10のときなら、
これを使って、 'top 10px'を代入　したいのでしょうから
～ = 'top mathRandom + px'
と全体を' 'で囲んだ　１つの文字列にするのではなく、
'文字列' + 　変数　 + '文字列'　で、　文字列や変数を連結するように
～ = 'top ' + mathRandom + 'px';
と記載する必要があります。
（ただし、次の件があるので、これではNGです）

３）
mathGetClass.style.position = 'top ～';
mathGetClass.style.position = 'left ～'';
として　'top ～ という文字列を　～positionプロパティに代入していますが、
～.positionに代入して有効なのは、'static' 'absolute' 'relative' 'fixed'です

top座標を指定したいなら　positionプロパティーではなく topプロパティーを使って
mathGetClass.style.top = mathRandom + 'px';
です。
(leftも同様）

---------------------------------------------------------
> また、複数のCSSを一括指定したい場合は、連想配列を使うのでしょうか？

同じクラスがついているのを一括でstyleを変更したいときは
JavaScriptのみで行うなら
var elements = document.getElementsByClassName("class名");
for (var i=0;i<elements.length;i++) {
　elements[i].style.position = 'fixed';
}
みたいにして配列をループで回すのが、一般的です。
ただ、jqueryを使うと
$('.class名').css('position', 'fixed');
で一括指定できます。

お礼

＞＞＞
１）
debu = mathGetClass.style.position = 'fixed';
の行では、 =での代入が２つあるので、　'fixed'という文字列が
debu変数にも、～.positionプロパティーにも代入されますが

mathGetClass.style.position = 'top mathRandom + px';
の行では debuには代入されていないので、
debu変数の中身は、そのまえの状態のままです。（'fixed'のまま）
このため、console.log(debu);では'fxed'になります。

イコールが二つある場合、優先度は同じなので、プログラミングでは同じ優先度の場合は、
より右にある方が優先されるのですか？
debu = （mathGetClass.style.position ='fixed'; )
とすればcssとして当たってくれるんですかね？

＞＞＞
２）
～ = 'top mathRandom + px'
としても、このままの文字列を代入しているだけです。
多分、やりたいのは、例えばmathRandon変数の中身が 10のときなら、
これを使って、 'top 10px'を代入　したいのでしょうから
～ = 'top mathRandom + px'
と全体を' 'で囲んだ　１つの文字列にするのではなく、
'文字列' + 　変数　 + '文字列'　で、　文字列や変数を連結するように
～ = 'top ' + mathRandom + 'px';
と記載する必要があります。
（ただし、次の件があるので、これではNGです）

そうですね。cssの値として認識させるためには、
文字列として値を渡すからといって、その値をひとつづつ文字列にしないとcssの値として認識せず、
別の物と認識してしまうのですね。
文字列なのになぜCSSの値として認識するのかちょっと不思議なのですが、
値として文字がぴったり当てはまった時はcssの値とわかるんですかね？

＞＞＞
２）
～ = 'top mathRandom + px'
としても、このままの文字列を代入しているだけです。
多分、やりたいのは、例えばmathRandon変数の中身が 10のときなら、
これを使って、 'top 10px'を代入　したいのでしょうから
～ = 'top mathRandom + px'
と全体を' 'で囲んだ　１つの文字列にするのではなく、
'文字列' + 　変数　 + '文字列'　で、　文字列や変数を連結するように
～ = 'top ' + mathRandom + 'px';
と記載する必要があります。
（ただし、次の件があるので、これではNGです）

仰る通りです、これはcssの問題ですね。

＞＞＞
同じクラスがついているのを一括でstyleを変更したいときは
JavaScriptのみで行うなら
var elements = document.getElementsByClassName("class名");
for (var i=0;i<elements.length;i++) {
　elements[i].style.position = 'fixed';
}
みたいにして配列をループで回すのが、一般的です。
ただ、jqueryを使うと
$('.class名').css('position', 'fixed');
で一括指定できます。

うまく伝わらなくて大変恐縮です。
複数のCSSのプロパティと値を当てることを想定していたのですが、
わかりにくくてすいません。
同じクラス名の要素が複数あった場合に同じcssを当てるというお話でしょうか？
これはわざわざforを使わないといけないというのは衝撃ですね。
やっぱりライブラリを使わないと厳しいといわれるのもわかります。

var elements = document.getElementsByClassName("class名")[0,1,2,3];
としても複数に荒れられないのでしょうか？
var elements = document.getElementsByClassName("class名")[*];
というやり方は恐らくできないのでしょうね。

i<elements.lengthこちらは配列の要素数を取得して要素数分ループさせて、
[0,1,2,3]のような状態を再現しているのですね。