当前位置:

vue/vue3/js来动态修改我们的界面浏览器上面的文字和图标

访客 2024-01-15 1448 0

前言:

        整理vue/vue3项目中修改界面浏览器上面的文字和图标的方法。

效果:

vue2/vue3: 默认修改

public/index.html   index.html

<!DOCTYPE html><html lang="en"><head><link rel="icon" type="image/svg+xml" href="图标地址" /><title>显示文字</title>... //图标放在public里面

js:动态修改

动态修改文字

let title = "新的标题"; // 设置新的标题document.title = title; // 动态修改网站标题

动态修改icon图标

function changeFavicon(link) {let $favicon = document.querySelector('link[rel="icon"]');if ($favicon !== null) {$favicon.href = link;} else {$favicon = document.createElement("link");$favicon.rel = "icon";$favicon.href = link;document.head.appendChild($favicon);}}let iconUrl = "新的图标地址"; // 设置新的图标地址changeFavicon(iconUrl); // 动态修改网站图标

发表评论

  • 评论列表
还没有人评论,快来抢沙发吧~