如何getElementById(function_parameter)

Question

怎么用getElementById(function_parameter)？

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

这里param1是动态传递的ID,当我使用上面的代码时,IE11中出现以下错误." 无法获得未定义或空引用的属性'样式' "

它被称为如下:

<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>

Answer 1

代码工作,它只是错字.

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>