Question

我想知道在使用＆＃39;这个＆＃39;时是否有办法改变元素的样式。在js es6。我在下面有以下代码：

＆＃13;

const mobileSubItems = document.querySelectorAll(".mobile-menu-overlay__item");
openSubMenu = (e) => {
  console.log(this);
}

for (var i = 0; i < mobileSubItems.length; i++) {
  mobileSubItems[i].addEventListener('click', openSubMenu);
}

＆＃13;

<div class="mobile-menu-overlay__item-content" style="maxHeight:0;">Test 1</div>
<div class="mobile-menu-overlay__item-content" style="maxHeight:0;">Test 2</div>
<div class="mobile-menu-overlay__item-content" style="maxHeight:0;">Test 3</div>

＆＃13;

我想将openSubmenu代码改为如下所示：

openSubMenu = (e) => {
  this.style.maxHeight = "none";
}

Answer 1

是的，您可以使用提供的逻辑。但是由于箭头功能，你正在失去这个背景。相反，请使用event.target属性。

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />

<body style="background-color: #5D6D7E;">
  <div class="header" id="myHeader">
    <h2>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;xxxxxxxxx</h2>
  </div>
  <div id="about" class="clearfix">
    <div id="text">
      <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br/>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
      <div class="header-bar"></div>
      <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
    </div>
    <img class="portrait-image round-border" id="image-position" src="http://abload.de/img/gpuxh.png" alt="portrait">
  </div>

</body>

或

如果要将其指向单击的元素，请使用function关键字定义openSubMenu函数。

var openSubMenu = (e)=> {
  e.target.style.maxHeight = '240px';
}

Working fiddle

Answer 2

有没有办法改变＆＃39;这个＆＃39;的css属性？在javascript es6？

是的，为回调使用正常的函数定义而不是胖箭头定义，因此触发事件设置的this值将适合您。

因为您正在使用胖箭头函数，所以this函数中openSubMenu()的值不是来自调用者，而是来自函数声明上下文（＆＃ 34;词汇＆＃34; this的值。如果您将openSubMenu()声明为普通函数，则click事件会将this设置为导致该事件的DOM元素，然后您可以使用this在其上设置样式

所以，改为：

function openSubMenu(e) {
    console.log(this);
}

人们需要记住，胖箭头函数不仅仅是一个函数声明快捷方式。它们也会影响this的价值。 因此，如果您希望函数调用者设置的this值，则不要使用胖箭头函数，因为胖箭头声明导致this的值不同使用。

正如我假设您已经知道的那样，您也可以使用e.target引用触发事件的DOM元素，但由于您明确询问了如何使this正常工作，因此我上面给你看过的。

有没有办法改变＆＃39;这个＆＃39;的css属性？在javascript es6？

2 个答案: