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); // 动态修改网站图标
相关推荐
花果山总钻风2 分钟前
Chrome 插件框架 Plasmo 基本使用示例
前端·chrome
资讯第一线3 分钟前
《Chrome》 [142.0.7444.60][绿色便携版] 下载
前端·chrome
会篮球的程序猿16 分钟前
原生表格文本过长展示问题,参考layui长文本,点击出现文本域
前端·javascript·layui
top_designer16 分钟前
Firefly 样式参考:AI 驱动的 UI 资产“无限”生成
前端·人工智能·ui·aigc·ux·设计师
蜗牛前端31 分钟前
使用 Trae AI 开发完整的开源 npm 包:snail-git-add
前端
哆啦A梦15881 小时前
48 我的地址页面布局
javascript·vue.js·node.js
Dontla1 小时前
React useMemo(当依赖项未变化,重复渲染时直接返回上一次缓存计算结果,而非重新执行计算)
前端·react.js·缓存
花生Peadar1 小时前
AI编程从入门到精通
前端·后端·代码规范
bug爱好者1 小时前
vue3.x 使用vue3-tree-org实现组织架构图 + 自定义模版内容 - 附完整示例
前端·javascript·vue.js
flashlight_hi1 小时前
LeetCode 分类刷题:1669. 合并两个链表
javascript·leetcode·链表