单击它后更改div css

Question

如何在单击此div后更改一些价格（我将它用作按钮）。我想例如宽度和高度改为200

HTML：

<div class = "sq" onclick="main.function();"> 
... 
</div> 

CSS：

.sq { 
    width: 102.5px; 
    height: 2px; 
} 

Answer 1

这可以使用CSS来完成。

button:focus { 
    width: 200px; 
    height: 200px; 
} 

这是一个笔为例。 http://codepen.io/doggard/pen/PzERxg

编辑：您可以通过在div上添加tabindex属性来在div上使用相同的方法。

<div tabindex="1"></div> 

Answer 2

如果我理解正确的话，你想.sq div来改变宽度和点击时的高度？

如果是这样，如果你不介意使用jQuery，你可以做这样的事情：

<script> 
    $(document).ready(function() { 
     $('.sq').click(function() { 
      $(this).css('height','200px'); 
      $(this).css('width','200px');  
     })  
    }) 
</script> 
<div class="sq"> 

</div> 

Answer 3

这里有一个办法做到这一点：

$(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"> 
 
&nbsp; 
 
</div> 
 

 
<div class="sq"> 
 
&nbsp; 
 
</div>

Answer 4

$(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>

Answer 5

<div class = "sq" onclick="changeDimensions();"> 

纯JavaScript：

function changeDimensions(){ 
    document.getElementsByClassName("sq").style.width = "200px"; 
    document.getElementsByClassName("sq").style.height = "200px"; 
}