いつもお世話になっております。またお勉強させてください。選択した倍率に合わせて、図形（…というかdiv）の大きさをaddclassでかえたいのですがうまくうごきません。selectの値はとれているのでaddclassが問題のようです。また、さくっとtransform:scale(倍率);を使うことは可能ですが？ addclassは追加というより書き換えと理解しておりますがあっておりますでしょうか。質問だらけのつたない文章で恐縮です。よろしくお願い申し上げます。 function Selc(Obj){ atai=Obj.options[Obj.selectedIndex].value; //選択された項目の値を取得する //alert(atai); //値の確認 if(atai=="0.5"){ $("#menu").addClass("b"); } if(atai=="1.5"){ $("#menu").addClass("c"); } if(atai=="2.0"){ $("#menu").addClass("d"); } } -Scale- 0.5 1.5 2.0 menu #menu { margin:0px; padding:0; width:100px; height:100px; border-radius:1000px; background:#bbb; text-align:center; } .b { margin:0px; padding:0; width:50px; height:50px; //0.5倍 border-radius:1000px; background:#bbb; text-align:center; } .c {margin:0px; padding:0; width:150px; height:150px; //1.5倍 border-radius:1000px; background:#bbb; text-align:center; } .d {margin:0px; padding:0; width:200px; height:200px; //2倍 border-radius:1000px; background:#bbb; text-align:center; }

うーん・・・

addclassがうまく働きません

解決済

質問者：sheyma
質問日時：2015/02/21 23:56
回答数：1件

いつもお世話になっております。
またお勉強させてください。

選択した倍率に合わせて、図形（…というかdiv）の大きさをaddclassでかえたいのですが
うまくうごきません。selectの値はとれているのでaddclassが問題のようです。
また、さくっとtransform:scale(倍率);を使うことは可能ですが？

addclassは追加というより書き換えと理解しておりますがあっておりますでしょうか。
質問だらけのつたない文章で恐縮です。
よろしくお願い申し上げます。

<!DOCTYPE html>
<html lang="ja">
<meta charset="utf-8">

<script type="text/javascript">

function Selc(Obj){

atai=Obj.options[Obj.selectedIndex].value; //選択された項目の値を取得する
//alert(atai); //値の確認

if(atai=="0.5"){
$("#menu").addClass("b");
}

if(atai=="1.5"){
$("#menu").addClass("c");
}

if(atai=="2.0"){
$("#menu").addClass("d");
}

}

</script>

<body>

<div>

<select name="sentaku" onchange="Selc(this)">
<option value="" selected>-Scale-</option>
<option value="0.5">0.5</option>
<option value="1.5">1.5</option>
<option value="2.0">2.0</option>
</select>

</div>

<div id="menu">
menu
</div>
</body>
</html>

<style>
#menu {
margin:0px; padding:0;

width:100px; height:100px;
border-radius:1000px;
background:#bbb;
text-align:center;
}

.b {
margin:0px; padding:0;
width:50px; height:50px; //0.5倍
border-radius:1000px;
background:#bbb;
text-align:center;
}

.c {margin:0px; padding:0;
width:150px; height:150px; //1.5倍
border-radius:1000px;
background:#bbb;
text-align:center;
}
.d {margin:0px; padding:0;
width:200px; height:200px; //2倍
border-radius:1000px;
background:#bbb;
text-align:center;
}

</style>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： DoubtOwl
回答日時：2015/02/23 12:59

#menuとID指定のクラスがあるのでそちらが優先されているようです。

#menu→.menu
<div id="menu">→<div id="menu" class="menu">
で動くようになります。

ただし、
＞addclassは追加というより書き換えと理解しておりますがあっておりますでしょうか。
addclassは追加です。
なのでaddclass("b")→addclass("c")→addclass("b")と動いた時に動作しません。
(bは既に追加されているので)
attr("class", "b")で書き換えるか、removeClassを使用してください。

＞また、さくっとtransform:scale(倍率);を使うことは可能ですが？
可能のようです。ただ始点が中央になるのか位置がずれました。