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 分钟前
调试技巧:使用 debugger 语句
javascript·前端开发·debugger调试·项目调试实战
千里马-horse30 分钟前
TypedArrayOf
开发语言·javascript·c++·node.js·napi
小笔学长38 分钟前
Webpack 配置优化:提高打包速度与质量
前端·项目实战·前端开发·webpack优化·打包性能优化
Hao_Harrision43 分钟前
50天50个小项目 (React19 + Tailwindcss V4) ✨| NotesApp(便签笔记组件)
javascript
优爱蛋白1 小时前
SCF His Tag 重组蛋白:c-Kit受体信号研究与干细胞培养应用的关键试剂
前端·人工智能·健康医疗
C_心欲无痕1 小时前
react - Suspense异步加载组件
前端·react.js·前端框架
JosieBook1 小时前
【Vue】05 Vue技术——Vue 数据绑定的两种方式:单向绑定、双向绑定
前端·javascript·vue.js
前端小L1 小时前
贪心算法专题(十五):借位与填充的智慧——「单调递增的数字」
javascript·算法·贪心算法
想学后端的前端工程师1 小时前
【浏览器工作原理与性能优化指南:深入理解Web性能】
前端·性能优化
Aliex_git2 小时前
内存堆栈分析笔记
开发语言·javascript·笔记