javascript - JavaScript 的 onclick 属性有效,但如果调用等效函数则无效

标签 javascript dom onclick

这适用于 onclick 属性:

<button type="button" onclick="this.style.color='red';">Astringents</button>

这在 onclick 属性中有效,但如果从 head 元素调用则无效:

<head>
    <script type="text/javascript">
    function red() {
        this.style.color='red';
    }
    </script>
</head>

<button type="button" onclick="red();">Astringents</button>

编辑:我想使用一个函数来为多个按钮提供服务。例如:

<button type="button" onclick="red();">Astringents</button>
<button type="button" onclick="red();">Exfoliators</button>
<button type="button" onclick="red();">Moisturizers</button>
<button type="button" onclick="red();">Masques</button/>

最佳答案

在这种情况下,this未引用 <button>元素 - 因此无法编辑元素的属性。

查看关于此主题的 quirksmode 文章 http://www.quirksmode.org/js/this.html

根据文章底部的示例,以下内容应该有效。

<head>
<script type="text/javascript">

function red(obj) {
    obj.style.color='red';
}
</script>
</head>

<button type="button" onclick="red(this)">Astringents</button>

关于javascript - JavaScript 的 onclick 属性有效,但如果调用等效函数则无效,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5012430/

相关文章:

jquery - 背景图片滚动,点击控制

javascript - HTML 元素高度,包括边距和子边距

javascript - 扩展 JavaScript 中的 split() 方法

javascript - leafletjs 覆盖层被隐藏

javascript - 使用 JS 添加到 DOM 后与 DOM 进行交互

javascript - 通过 DOM 解析获取所有子项和值

jquery - 在我无法控制的任何 AJAX 调用之后使用 JQuery 修改 DOM

javascript - 基于计算属性数组的 Vuejs 输入绑定(bind)

android - DialogFragment onClick 监听器不适用于 ImageButton

android - 找不到使用android的方法:onclick