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

前言:

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

效果:

vue2/vue3: 默认修改

public/index.html index.html

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

js:动态修改

动态修改文字

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

动态修改icon图标

javascript 复制代码
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); // 动态修改网站图标
相关推荐
再玉米地里吃过亏21 分钟前
ONENET平台API鉴权错误
前端
网络点点滴23 分钟前
Vue3中Suspense的使用
前端·javascript·vue.js
饼干哥哥40 分钟前
搭建一个云端Skills系统,随时随地记录TikTok爆款
前端·后端
酉鬼女又兒1 小时前
零基础快速入门前端Web存储(sessionStorage & localStorage)知识点详解与蓝桥杯考点应用(可用于备赛蓝桥杯Web应用开发)
开发语言·前端·javascript·职场和发展·蓝桥杯·html
FollowHeart1 小时前
自建私有日记本:MyDiary —— 属于你的 NAS 极简写作空间
vue.js·github
DanCheOo1 小时前
# 从"会用 AI"到"架构 AI":高级前端的认知升级
前端·ai编程
社恐的下水道蟑螂1 小时前
前端面试必问 Git 通关指南:常用命令速查 + merge/rebase 深度辨析,看完再也不慌
前端·git·面试
angerdream1 小时前
最新版vue3+TypeScript开发入门到实战教程之组件通信之二
javascript·vue.js
小只笨笨狗~1 小时前
解决objectSpanMethod与expand共存时展开后表格错位问题
开发语言·javascript·ecmascript
None3211 小时前
NestJS 流式文件上传实践:从 Multer 到 Busboy 的进阶之路
前端·后端