ｊｓクリックでpadding-bottomを変えることができない

Question

###■困っていること
クリックによってcssを変更したいです。

【positionの変更はOK】なのに、

同様の書き方で【padding-bottomの変更がダメ】なのです。

これはいったい、どういう理由なのでしょうか？？

###■実際の動き
https://jsfiddle.net/Ltzvsk7w/

###■上のコード

【positionの変更はOK】

<div id="ok">
<div class="okdayo" onclick="setPosition('relative');">
<div class="btn_ok">クリックでposition変更(absolute→relative)</div>
</div>
</div>

<script>
function setPosition( $position ) {
 var $elementReference = document.getElementById( "ok" );
 $elementReference.style.position = $position;
}
</script>

【padding-bottomの変更がダメ】

<div id="dame">
<div class="damedayo" onclick="setPadding('100px');">
<div class="btn_dame">クリックでpadding-bottom変更(10px→100px)</div>
</div>
</div>

<script>
function setPadding( $padding-bottom ) {
 var $elementReference = document.getElementById( "dame" );
 $elementReference.style.padding-bottom = $padding-bottom;
}
</script>

Answer 1

paddingBottomだとどうでしょうか。
変数にハイフンは使えないような？

Comments

[退会済みユーザー]

おおお、ありがとうございます！できました。

「変数にハイフンは使えない」だなんて、、言語ごとに統一してほしいですね。(;・∀・)

[defghi1977]

ハイフンマイナスは大抵の言語で「引き算」ですよ

[退会済みユーザー]

へぇ~!!それじゃCSSだけが特殊なのですね。覚えておきます♪ありがとうございます。

[defghi1977]

そうじゃなくて, スタイルシート言語であるCSSとスクリプト言語であるJavaScriptを一緒くたにしてはいけないんです. それにCSSの「padding-bottom」はそもそも変数名ではないし, CSSにおける変数はCSS variablesという専用の仕様があります.

Answer 2

よっ

tipsです:)

1. scriptを分ける必要がありません:)
2. jQueryを使ったら、変数によく「$」を使用していますが、本当は不要です:)
3. Javascriptを使うと、ハイフンが使えないですので、CamelCase形になります : paddingBottom
4. onloadのEventを使ってないですので、あのfunctionを使っているHTMLの前に、Javascriptを書いてください:)

<script>
function setPosition( position ) {
 var elementReference = document.getElementById( "ok" );
 elementReference.style.position = position;
}

function setPadding( paddingBottom ) {
 var elementReference = document.getElementById( "dame" );
 elementReference.style.paddingBottom = paddingBottom;
}
</script>

<h4>これがダメ</h4>
<div id="dame">
<div class="damedayo" onclick="setPadding('100px');">
<div class="btn_dame">クリックでpadding-bottom変更(10px→100px)</div>
</div>
</div>

<h4>これはOK</h4>
<div id="ok">
<div class="okdayo" onclick="setPosition('relative');">
<div class="btn_ok">クリックでposition変更(absolute→relative)</div>
</div>
</div>

Comments

[退会済みユーザー]

おおお、わかりやすいご回答、ありがとうございます。

・・・

>１．scriptを分ける必要がありません:)
毎回わけてました。笑

>２．jQueryを使ったら、変数によく「$」を使用していますが、本当は不要です:)
びっくりです。

>３．Javascriptを使うと、ハイフンが使えないですので、CamelCase形になります : paddingBottom
今回できなかった理由ですね。キャメルケースというのですか。覚えておきます。

>４．onloadのEventを使ってないですので、あのfunctionを使っているHTMLの前に、Javascriptを書いてください:)
覚えておきます。

・・・

ベストアンサーは決めてしまったので浮気はしませんけれど、よりわかりやすいご説明、誠に感謝です。('◇')ゞ