iconfont图标 js中怎么替换

在JavaScript中替换iconfont图标的方法包括：直接修改DOM元素的class属性、动态创建新的图标元素并替换现有元素、使用内联SVG图标等。直接修改DOM元素的class属性是最常用的方法。

一、直接修改DOM元素的class属性

直接修改DOM元素的class属性是最简便、最常用的方法。通过JavaScript获取到目标元素后，可以使用classList属性来添加或删除class，从而实现图标的替换。例如：

document.getElementById('myIcon').classList.remove('icon-old');
document.getElementById('myIcon').classList.add('icon-new');

这种方法的优点在于简单易懂，只需要少量代码即可实现图标替换，适用于大多数简单场景。接下来我们将详细描述这种方法的具体步骤与注意事项。

二、获取目标元素

在替换iconfont图标之前，首先需要获取目标元素。常见的获取元素的方法有getElementById、getElementsByClassName、querySelector等。以下是几种方法的示例：

使用`getElementById`

var iconElement = document.getElementById('myIcon');

使用`getElementsByClassName`

var iconElements = document.getElementsByClassName('icon-class');
for (var i = 0; i < iconElements.length; i++) {
    // 操作每一个元素
}

使用`querySelector`

var iconElement = document.querySelector('.icon-class');

三、修改class属性

获取到目标元素后，可以使用classList属性进行class的添加与删除。以下是详细的代码示例：

// 获取元素
var iconElement = document.getElementById('myIcon');
// 删除旧的class
iconElement.classList.remove('icon-old');
// 添加新的class
iconElement.classList.add('icon-new');

注意事项

确保新旧class正确：在使用classList进行添加或删除时，确保class名称拼写正确。
多次修改：如果需要多次修改图标，建议封装成函数以提高代码的复用性。

function replaceIcon(element, oldClass, newClass) {
    element.classList.remove(oldClass);
    element.classList.add(newClass);
}
// 使用函数
var iconElement = document.getElementById('myIcon');
replaceIcon(iconElement, 'icon-old', 'icon-new');

四、动态创建新的图标元素并替换现有元素

在一些复杂场景中，可能需要动态创建新的图标元素，并替换现有元素。这种方法相比直接修改class属性更为灵活，但代码量较大。

创建新的图标元素

var newIconElement = document.createElement('i');
newIconElement.classList.add('icon-new');

替换现有元素

var oldIconElement = document.getElementById('myIcon');
oldIconElement.parentNode.replaceChild(newIconElement, oldIconElement);

五、使用内联SVG图标

内联SVG图标提供了更高的灵活性和可控性，适用于需要复杂图标替换的场景。以下是内联SVG图标替换的示例：

创建SVG图标

var svgIcon = `
<svg class="icon-new" viewBox="0 0 1024 1024">
    <path d="..."></path>
</svg>
`;

插入SVG图标

document.getElementById('myIcon').innerHTML = svgIcon;

六、总结

在JavaScript中替换iconfont图标的方法多种多样，选择合适的方法取决于具体的应用场景。直接修改DOM元素的class属性最为简便，适用于大多数场景。动态创建新的图标元素并替换现有元素适用于需要更高灵活性的场景，而使用内联SVG图标则提供了最高的可控性，适用于复杂图标替换。

无论选择哪种方法，都需要确保代码的可读性与复用性，建议在实际项目中使用封装函数来提高代码的维护性。如果项目涉及团队协作，推荐使用研发项目管理系统PingCode和通用项目协作软件Worktile来提高项目管理与协作效率。