javascript 如何将javascript函数添加到html标签？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46091057/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to add javascript function to html tag?
提问by user2265229
Just curious, and want to know. Can I add a javascript function to certain html tag? In example, if I have div tag like this:
只是好奇，想知道。我可以向某些 html 标签添加 javascript 函数吗？例如，如果我有这样的 div 标签：
<div id="example">Hello!</div>
and want to add function that alert the value inside of every div like:
并想添加提醒每个 div 内的值的功能，例如：
function divFunction(){
alert(/*some div content*/);
}
so, it can be executed like:
所以，它可以像这样执行：
<div id="example">Hello!</div>
<script>
document.getElementById("example").divFunction();
</script>
The point of my question is to add some new attribute or function to a certain tags. Like if there is:
我的问题的重点是向某个标签添加一些新的属性或功能。就像如果有：
document.getElementById("example").innerHTML;
can it be:
是真的吗：
document.getElementById("example").newAttribute;
What makes me curious because jQuery can done something like this:
是什么让我好奇，因为 jQuery 可以做这样的事情：
$( "#result" ).load( "ajax/test.html" );
采纳答案by Maverick
This isn't possible because $ (jQuery) and document are defined objects that have there in built functions.
这是不可能的，因为 $ (jQuery) 和文档是在内置函数中定义的对象。
Because when you use .you call an object member.
因为当您使用时，您.会调用一个对象成员。
Foo.bar()- Calling function bar()defined insideand object Foo.
Foo.bar()-内部bar()定义的调用函数和对象。Foo
So you would have to make your class/selector.
所以你必须制作你的类/选择器。
Here is a simple example:
这是一个简单的例子：
class select {
constructor(selector) {
this._element = document.getElementById(selector);
}
// Functions
colorMe() {
this._element.style.backgroundColor = "red";
}
moveMe(x) {
this._element.style.marginTop = x;
}
}
var elem = new select("example");
elem.colorMe();
elem.moveMe("50px");<div id="example">
This is an example
</div>回答by cyr_x
DOM elements are like javascript objects with certain properties, so you could add a new property to, in your case a new function.
DOM 元素就像具有某些属性的 javascript 对象，因此您可以添加一个新属性，在您的情况下是一个新函数。
Here's an example:
下面是一个例子：
var element = document.querySelector('#example');
function bindToNode(node, name, fn) {
node[name] = fn.bind(node);
}
bindToNode(element, 'logValue', function() {
console.log(this.textContent);
});
element.logValue();<div id="example">
Hello!
</div>But you shouldn't mess arround with DOM elements, a better way would be to wrap the elements like jQuery does.
但是你不应该乱用 DOM 元素，更好的方法是像 jQuery 一样包装元素。
回答by itodd
You can add events to the DOM elements. Read this page https://www.w3schools.com/js/js_htmldom_events.aspfor more information or see a small example below
您可以向 DOM 元素添加事件。阅读此页面https://www.w3schools.com/js/js_htmldom_events.asp了解更多信息或查看下面的小例子
function divFunction(){
alert(document.getElementById("example").innerText);
}<div id="example" onclick="divFunction()">Hello!</div>回答by Will Reese
You should pass the html element to your javascript function. Add an element argument in your function definition.
您应该将 html 元素传递给您的 javascript 函数。在函数定义中添加元素参数。
function divFunction(el){
alert(el.innerHTML);
}
And use getElementByIdto reference the element to use as an argument.
并用于getElementById引用要用作参数的元素。
<div id="example">Hello!</div>
<script>
divFunction(document.getElementById("example"));
</script>
