Question

我的目标是只需将点击大小增加10％即可。我已将底部函数留在JavaScript空白中，因为这是我认为需要插入的地方。我包含了html中div的代码。

CSS

div {
    width: 100px;
    height: 100px;
    background-color: #000;
    margin: 5px;
    float: left;
}

JS

var newDiv = document.createElement("div");
newDiv.addEventListener('click', handleClick);
document.body.appendChild(newDiv);

function handleClick(event) {

}

Answer 1

以下是该场景的简单实现：

http://jsbin.com/joxojelami/1/edit?html,css,js,output

以这种方式构建代码可能不适合现实世界的应用程序，但仅用于说明目的。如果您有任何问题，请告诉我。

Answer 2

使用JS（没有JQuery）你可以这样做：

var newDiv = document.createElement("div");

newDiv.addEventListener('click', handleClick);
document.body.appendChild(newDiv);

function handleClick(event) {
  this.style.removeProperty('width');

  var currentWidth = this.offsetWidth;
  alert('current: ' + currentWidth);
  var newWidth = currentWidth * 1.1; // increase by 10%
  //this.offsetWidth = newWidth;
  alert('new: ' + newWidth);
  this.style.setProperty('width', newWidth+'px');
  this.style.setProperty('border-color', 'green');
}

div {
  width: 100px;
  height: 100px;
  background-color: #000;
  margin: 5px;
  float: left;
  border: 1px solid red;
}

Answer 3

您可以获得计算样式，然后将其中的10％添加到宽度：

var newDiv = document.createElement("div");
newDiv.addEventListener('click', handleClick);
document.body.appendChild(newDiv);

function handleClick(event) {
   var computedStyle = document.defaultView.getComputedStyle(newDiv, null);

   var width=parseInt(computedStyle.width);
   newDiv.style.width=(width * 1.1) + "px";
}

如何使用事件监听器将点击的大小增加10％？

3 个答案: