如何通过 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>
代码有效,只是有很多错别字。
- 第一个
a
向函数发送了错误的参数。
- 所有
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>
如何使用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>
代码有效,只是有很多错别字。
- 第一个
a
向函数发送了错误的参数。 - 所有
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>