如何通过javascript向元素添加onmouseover样式？
[英]How to add onmouseover styling to an element through javascript?
问题描述
Attempting to remove and reapply function to the onmouseover event of an element.
尝试移除并重新应用函数到元素的 onmouseover 事件。 Not sure how to go about this, have attempted several ways without any luck.不知道如何解决这个问题，尝试了几种方法，但没有任何运气。
<!DOCTYPE html> <html> <body> <button id="my_button" onmouseover="myFunction(this)">Try it</button> <script> function myFunction(ele) { alert("hi") document.getElementById("my_button").onmouseover = "null"; document.getElementById("my_button").onmouseover = "myFunction(this)"; } </script> </body> </html>
3 个解决方案
解决方案1
0 2022-07-22 01:01:21
您可以使用 ：
<button id="my_button" onmouseover="alert('hi')">Try it</button>
解决方案2
0 已采纳 2022-07-22 01:36:00
The issue is that you're setting the button onmouseover property to a string in myFunction instead of to a function object.问题是您将按钮onmouseover属性设置为myFunction中的字符串而不是函数对象。
The HTML parser creates an anonynmous handler function from the onmousever attribute value for you, but setting the button property to a string in JavaScript won't create such a function. HTML 解析器根据onmousever属性值为您创建一个匿名处理函数，但在 JavaScript 中将 button 属性设置为字符串不会创建这样的函数。 Try尝试
<!DOCTYPE html> <html> <body> <button id="my_button" onmouseover="myFunction.call(this, event)">Try it</button> <script> function myFunction(event) { alert("hi, this.tagName = " + this.tagName) document.getElementById("my_button").onmouseover = "null"; document.getElementById("my_button").onmouseover = myFunction; // a function object } </script> </body> </html>
Notice I've modified myFunction to see the button object as its this value, and its argument to be the mouse event raised for the click, and changed the call in the handler generated by the HTML to call myFunction as if it were the actual event handler.请注意，我已修改myFunction以将按钮对象视为其this值，并将其参数视为为单击引发的鼠标事件，并将 HTML 生成的处理程序中的调用更改为调用myFunction ，就好像它是实际事件一样处理程序。 This was to keep the calls to myFunction seeing the button as its this value and event as its argument in both cases.这是为了让对myFunction的调用在这两种情况下都将按钮视为它的this值和event作为它的参数。
For more about the handler created by the HTML parser see a previous answer (disclaimer: of mine) to ' this inside event handler from HTML attribute' that goes into greater detail.有关由 HTML 解析器创建的处理程序的更多信息，请参阅之前的答案（免责声明：我的）对“HTML 属性中的this内部事件处理程序”进行了更详细的说明。
Note that for various reasons it is no longer recommended to create event handlers using oneventname attribute values in HTML when you can add them using element.addEventListener in JavaSript as part of initialization.请注意，由于各种原因，当您可以使用 JavaSript 中的element.addEventListener作为初始化的一部分添加事件处理程序时，不再建议使用 HTML 中的oneventname属性值创建事件处理程序。
解决方案3
0 2022-07-22 02:55:14
try尝试
<!DOCTYPE html> <html> <body> <button id="my_button" class="mousemove" >try it</button> <script> document.getElementsByClassName("mousemove")[0].onmousemove = function(){ alert("hi") document.getElementById("my_button").onmousemove = function(){ return null } } </script> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.