如何通过 getElementById(function_parameter)

How to getElementById(function_parameter)

如何使用getElementById(function_parameter)

function myFunction(param1){
      document.getElementById(param1).style.color="#E66C2C";
}

这里的param1是一个动态传递的ID,当我使用上面的代码时,我在IE11中得到了以下错误。 “无法获取未定义或空引用的 属性'style'

调用如下:

<a class="someClass1" id="customID1" name="customName1" onClick="javascript:myFunction('customID1');">Custom1</a>

<a class="someClass2" id="customID2" name="customName2" onClick="javascript:myFunction('customID2');">Custom2</a>

<a class="someClass3" id="customID3" name="customName3" onClick="javascript:myFunction('customID3');">Custom3</a>

代码有效,只是有很多错别字。

  1. 第一个 a 向函数发送了错误的参数。
  2. 所有 onclick 作为开始 " 但不是结尾。

下面是一个工作片段:

function myFunction(param1) {
  document.getElementById(param1).style.color = "#E66C2C";
}
<a class="someClass1" id="customID1" name="customName1" onClick="javascript:myFunction('customID1',this);">Custom</a>

<a class="someClass2 " id="customID2" name="customName2 " onClick="javascript:myFunction( 'customID2');">Custom2</a>

<a class="someClass3" id="customID3" name="customName3" onClick="javascript:myFunction('customID3');">Custom3</a>

更好的方法

只需按 class 绑定并使用 target:

//The function that handles the click
//This function takes the event and the desired class as arguments
function handleClick(e, c, func) {
  e = e || window.event;
  //Get target
  var target = e.target || e.srcElement;
  //Test for right class
  var hasClass = false;
  for (var i = 0; i < target.className.split(" ").length; i++) {
    if (target.className.split(" ")[i] == c.toString()) {
      hasClass = true;
      break;
    }
  }
  if (hasClass === true) {
    func(target);
  }
}

//Function to bind click events on class
function bindClassEventClick(cls, func) {
  if (document.body.addEventListener) {
    document.body.addEventListener('click', function(e) {
      handleClick(e, cls, func)
    }, false);
  } else {
    document.body.attachEvent('onclick', function(e) {
      handleClick(e, cls, func)
    }); //for IE
  }
}

//Bind event "someClass" click
bindClassEventClick('someClass', function(target) {
  target.style.color = "#E66C2C";
});
bindClassEventClick('someClass2', function(target) {
  target.style.color = "red";
});
<a class="someClass">Custom1</a>
<a class="someClass2">Custom2</a>
<a class="someClass">Custom3</a>

再一次,在这个阶段你不妨实施 jQuery().

jQuery

jQuery 是一个库构建,其特定目的是简化用户与 DOM 的交互并生成统一的跨浏览器行为。

jQuery(".someClass").on("click", function() {
  jQuery(this).css("color", "#E66C2C")
});
jQuery(".someClass2").on("click", function() {
  jQuery(this).css("color", "red")
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a class="someClass">Custom1</a>
<a class="someClass2">Custom2</a>
<a class="someClass">Custom3</a>