Question

如何在点击此div后更改一些valeues（我像按钮一样使用它）。我想将宽度和高度更改为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

以下是一种方法：

＆＃13;

$(function(){
  $('.sq-unique').click(function(){
    $('.sq-unique').toggleClass('sqClick');
  });
});

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 4

＆＃13;

$(function() {
  $('.sq-click').click(function() {
    $(this).toggleClass('active');
  });
});

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 5

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

纯javascript：

<authentication mode="Windows" />
    <identity impersonate="true" />

单击后更改div css

5 个答案: