动态修改Awesome Icon颜色遇问题：代码返回undefined求助

让我帮你找出代码里的问题，你遇到的undefined是因为两处关键错误导致的：

1. jQuery ID选择器缺少前缀 #

你当前用$('idAwesomeIcon')来获取图标元素，但jQuery中通过ID选择元素必须要加#前缀。没有#的话，jQuery会把它当作HTML标签名去查找，显然不存在名为idAwesomeIcon的标签，所以找不到元素，调用.css("color")自然返回undefined。

正确的选择器写法是：

$('#idAwesomeIcon')

2. 函数定义与调用名称不匹配 #

你定义的函数是changeAIColor(idName)，但在th:onclick里调用的却是changeIconColor();——函数名称完全不一致，这会导致点击时根本不会执行你写的那个带alert的函数（浏览器严格模式下还会直接报错）。

修正后的完整代码 #

<script type="text/javascript">
function changeAIColor() {
    // 修正ID选择器，加上#
    alert($('#idAwesomeIcon').css("color"));
}
</script>

<a href="#" th:onclick="'changeAIColor();'">
    <span th:if="${#lists.contains(userMenus, menu)}">
        <i id="idAwesomeIcon" class="fa fa-toggle-on fa-lg" style="color:#009900; text-align: center;" aria-hidden="true"></i>
    </span>
</a>

可选优化：支持动态传入ID #

如果后续你需要给多个图标复用这个函数，可以利用你定义的idName参数，修改成更灵活的版本：

function changeAIColor(idName) {
    // 动态拼接ID选择器
    alert($('#' + idName).css("color"));
}

对应的HTML调用也要改成：

<a href="#" th:onclick="'changeAIColor(\'idAwesomeIcon\');'">

这样不管图标ID是什么，都能传入函数获取颜色值。

内容的提问来源于stack exchange，提问作者en Peris