如何以编程方式更改带轮廓的按钮图标？

要编程方式更改带轮廓的按钮图标，通常涉及修改按钮的前景色（用于轮廓）和背景色（用于图标）。以下是一个使用HTML和CSS的示例，展示如何实现这一功能：

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Button Icon Change</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <button id="iconButton" class="outlined-button">
        <i class="icon">⭐</i>
    </button>
    <button onclick="changeIconColor()">Change Color</button>

    <script src="script.js"></script>
</body>
</html>

CSS部分（styles.css）

.outlined-button {
    border: 2px solid #000; /* 轮廓颜色 */
    background-color: transparent; /* 初始背景透明 */
    padding: 10px 20px;
    cursor: pointer;
    font-size: 16px;
}

.icon {
    color: #000; /* 图标颜色 */
}

JavaScript部分（script.js）

function changeIconColor() {
    const button = document.getElementById('iconButton');
    const icon = button.querySelector('.icon');

    // 随机生成颜色
    const randomColor = '#' + Math.floor(Math.random()*16777215).toString(16);

    // 更改轮廓和图标颜色
    button.style.borderColor = randomColor;
    icon.style.color = randomColor;
}