Question

这适用于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/>

Answer 1

在这种情况下，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的onclick属性可以工作但如果调用等效函数则不行

1 个答案: