Question

我试图在没有javascript的情况下向一个元素添加一个类。我定义了一个函数，当单击一个按钮时将触发该函数，但是当我加载页面时，使用onload事件而不是指定的clicked事件立即添加该类。这很奇怪，

<div id="div1" class="mydiv">A DIV</div>
<input type="button" id="btn" value="click">

#div1 {
width: 150px;
height: 100px;
background-color: red;
position: relative;
transition: top, left 0.43s 0.56s ease-in-out;
}
.move {
    top: 200px;
    left: 450px;
    transition: top, left 0,4s 0.58s ease-in-out;
}

function ulterClass (el, newClass) {
var currentClass = el.getAttribute('class');
if (typeof currentClass!== 'undefined' && currentClass) {
    el.setAttribute('class', currentClass + ' '+ newClass);
}else{
    el.setAttribute('class', newClass);
}
}
var div = document.getElementById('div1');
var btn = document.getElementById('btn');
function ulterClass (el, newClass) {
var currentClass = el.getAttribute('class');
if (typeof currentClass!== 'undefined' && currentClass) {
    el.setAttribute('class', currentClass + ' '+ newClass);
}else{
    el.setAttribute('class', newClass);
}
}
var div = document.getElementById('div1');
var btn = document.getElementById('btn');

btn.addEventListener('click', ulterClass(div, 'move'));

Answer 1

问题在于这个陈述。当它运行时，它执行该功能。

btn.onclick = ulterClass(div, 'move');

相反，您可以使用按钮本身的onclick属性来分配事件处理程序。像这样：

<input type="button" id="btn" value="click" onclick="ulterClass(div, 'move')">

function ulterClass(el, newClass) {
  var currentClass = el.getAttribute('class');
  if (typeof currentClass !== 'undefined' && currentClass) {
    el.setAttribute('class', currentClass + ' ' + newClass);
  } else {
    el.setAttribute('class', newClass);
  }
}
var div = document.getElementById('div1');
var btn = document.getElementById('btn');
// When this statement runs, it executes the function.
//btn.onclick = ulterClass(div, 'move');

#div1 {
  width: 150px;
  height: 100px;
  background-color: red;
  position: relative;
  transition: top, left 0.43s 0.56s ease-in-out;
}

.move {
  top: 200px;
  left: 450px;
  transition: top, left 0, 4s 0.58s ease-in-out;
}

<div id="div1" class="mydiv">A DIV</div>
<input type="button" id="btn" value="click" onclick="ulterClass(div, 'move')">

我还建议您不要在事件处理程序中引用全局变量div，而是在那里提供它的ID。见：

function ulterClass(elementId, newClass) {
  var el = document.getElementById(elementId);
  var currentClass = el.getAttribute('class');
  if (typeof currentClass !== 'undefined' && currentClass) {
    el.setAttribute('class', currentClass + ' ' + newClass);
  } else {
    el.setAttribute('class', newClass);
  }
}
//var div = document.getElementById('div1');
//var btn = document.getElementById('btn');
// When this statement runs, it executes the function.
//btn.onclick = ulterClass(div, 'move');

#div1 {
  width: 150px;
  height: 100px;
  background-color: red;
  position: relative;
  transition: top, left 0.43s 0.56s ease-in-out;
}

.move {
  top: 200px;
  left: 450px;
  transition: top, left 0, 4s 0.58s ease-in-out;
}

<div id="div1" class="mydiv">A DIV</div>
<input type="button" id="btn" value="click" onclick="ulterClass('div1', 'move')">

以下是使用addEventListener：

执行此操作的方法

function ulterClass(el, newClass) {
  var currentClass = el.getAttribute('class');
  if (typeof currentClass !== 'undefined' && currentClass) {
    el.setAttribute('class', currentClass + ' ' + newClass);
  } else {
    el.setAttribute('class', newClass);
  }
}
var div = document.getElementById('div1');
var btn = document.getElementById('btn');

btn.addEventListener('click', function() {
  ulterClass(div, 'move');
});

#div1 {
  width: 150px;
  height: 100px;
  background-color: red;
  position: relative;
  transition: top, left 0.43s 0.56s ease-in-out;
}

.move {
  top: 200px;
  left: 450px;
  transition: top, left 0, 4s 0.58s ease-in-out;
}

<div id="div1" class="mydiv">A DIV</div>
<input type="button" id="btn" value="click" >

load event告诫我的函数触发而不是click事件

1 个答案: