单击后更改div CSS

Question

单击此div后，如何更改某些价位（我将其用作按钮）。 我想例如将宽度和高度更改为200。

的HTML：

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

CSS：

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

Answer 1

如果我的理解正确，您是否希望.sq div在单击时更改宽度和高度？

如果是这样，如果您不介意使用Jquery，则可以执行以下操作：

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

</div>

Answer 2

这只能使用css来完成。

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

这里以笔为例。 http://codepen.io/doggard/pen/PzERxg

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

<div tabindex="1"></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";
}