このdivをクリックした後にいくつかの値を変更するにはどうすればよいですか（ボタンのように使用します）。divをクリックしてからdivに変更します
<div class = "sq" onclick="main.function();">
...
</div>
はCSS：私は200
HTMLに例の幅と高さを変更したい私が正しく理解していた場合
.sq {
width: 102.5px;
height: 2px;
}
これはCSSのみを使用して実行できます。
button:focus {
width: 200px;
height: 200px;
}
ここでは例としてペンです。 http://codepen.io/doggard/pen/PzERxg
edit：divにtabindex属性を追加することで、同じアプローチをdivで使用できます。
<div tabindex="1"></div>
、あなたは.sq div要素の幅に変更したいとクリックしたときの高さですか？
もしそうなら、あなたはjQueryのを使用して気にしないならば、あなたはこのような何かを行うことができます：
<script>
$(document).ready(function() {
$('.sq').click(function() {
$(this).css('height','200px');
$(this).css('width','200px');
})
})
</script>
<div class="sq">
</div>
はい。私はいくつかのボタンを持っており、私はその時にそれらのうちの1つだけを変更したい、残りは元のCSSと同じでなければならない。あなたはそれをする方法を知っていますか？ – Onez
上記のようにする必要があります - すべてがクラス.sqを持つ場合、クリックしたオブジェクトの高さと幅のみが変更され、他のオブジェクトには影響しません。さまざまな幅と高さを切り替えたい場合は、私よりも優れた解決策があります:) – AmmyKami83
ここでそれを行うための一つの方法です：
$(function(){
$('.sq-unique').click(function(){
$('.sq-unique').toggleClass('sqClick');
});
});.sq {
border: 1px solid green;
width: 102.5px;
height: 2px;
float: left;
cursor: pointer;
}
.sq-unique {
border: 1px solid red;
width: 102.5px;
height: 2px;
float: left;
cursor: pointer;
}
.sq-unique.sqClick {
height: 200px;
width: 200px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="sq-unique">
</div>
<div class="sq">
</div>私はいくつかのボタンがあり、そのうちの1つだけを変更したいのですが、残りは元のCSSと同じにする必要があります。あなたはそれをする方法を知っていますか？ – Onez
はい、.sqクラスを一意の.sq-uniqueクラスに変更しました（適切と思われる名前を変更します）。次に、1つの要素または複数の要素に対してのみ使用できます。 –
$(function() {
$('.sq-click').click(function() {
$(this).toggleClass('active');
});
});.sq {
transition: all 0.25s ease;
display: inline-block;
border: 2px solid #f00;
vertical-align: top;
text-align: center;
padding: 5px 10px;
margin: 5px 10px;
cursor: pointer;
height: 20px;
width: 80px;
}
.sq-click.active {
line-height: 30px;
width: 120px;
height: 30px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="sq sq-click">Button 1</div>
<div class="sq">Button 2</div>
<div class="sq">Button 3</div>
<div class="sq">Button 4</div>私はいくつかのボタンを持っていて、そのうちの1つだけを変更したい、残りは元のCSSと同じにする必要があります。あなたはそれをする方法を知っていますか？ – Onez
@Onez私は自分の答えを更新しました、それはあなたが望むものですか？ –
<div class = "sq" onclick="changeDimensions();">
ピュアのjavascript：
function changeDimensions(){
document.getElementsByClassName("sq").style.width = "200px";
document.getElementsByClassName("sq").style.height = "200px";
}
ご質問は不明です。あなたは正確に何を達成しようとしていますか？ –
私はポストを編集しました。私はそれをクリックした後に例えば幅と高さを200に変更したいと思います。私は多くのボタンを持っており、アクティブ（クリック）だけを変更したいだけです。 – Onez