如何让JS的toggle函数判断作用于触发元素this还是指定ID的元素

• 类型判断逻辑错误：你当前的判断逻辑仅在me为空字符串时才使用this，但传入this时me是DOM元素对象，既不是空字符串也不是合法ID字符串，document.getElementById(me)会把DOM对象强制转为"[object HTMLDivElement]"这类字符串，找不到对应元素，直接触发异常。
• 函数内部this指向错误：在行间onclick事件中直接调用普通函数时，函数内部的this默认指向window对象，就算你触发了me == ''的分支，拿到的也不是触发事件的元素。
• classList赋值错误：classList是只读的DOMTokenList接口对象，不能直接赋值为字符串，要修改元素类名应该操作className属性，或者调用classList的add/remove/toggle等方法。
• 参数缺失：你的函数定义需要第二个style参数，但给出的调用示例都没有传入该参数，执行时style为undefined，就算前面逻辑正确也无法正确设置样式。

调整后函数代码 #

function toggle(me, style) {
  // 按参数类型判断是直接用DOM元素还是按ID查元素
  var myelm = typeof me === 'string' ? document.getElementById(me) : me;
  // 元素不存在直接返回避免报错
  if (!myelm) return;
  // 如果是覆盖全量类名用className赋值
  myelm.className = style;
  // 如果是要切换单个类的显示/隐藏，更符合toggle命名的写法是下面这行
  // myelm.classList.toggle(style);
}

调用示例（需补全style参数） #

<!-- 作用到当前触发点击的元素 -->
<div onclick="toggle(this, 'your-class-name');"></div>
<!-- 作用到指定ID的其他元素 -->
<div onclick="toggle('otherelement', 'your-class-name');"></div>

内容的提问来源于stack exchange，提问作者Cain Nuke