当前位置: 首页 > news >正文

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

前言:

        整理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); // 动态修改网站图标

http://www.lryc.cn/news/277895.html

相关文章:

  • MobaXterm SSH 免密登录配置
  • 霍兰德职业兴趣测试:找到与你性格匹配的职业
  • LVGL学习笔记 显示和隐藏 对象的属性标志位 配置
  • cuda上使用remap函数
  • 【JaveWeb教程】(18) MySQL数据库开发之 MySQL数据库设计-DDL 如何查询、创建、使用、删除数据库数据表 详细代码示例讲解
  • ElasticSearch学习笔记-SpringBoot整合Elasticsearch7
  • [足式机器人]Part2 Dr. CAN学习笔记 - Ch02动态系统建模与分析
  • 【一周年创作总结】人生是远方的无尽旷野呀
  • 金融帝国实验室(Capitalism Lab)V10版本游戏平衡性优化与改进
  • [SpringBoot]接口的多实现:选择性注入SpringBoot接口的实现类
  • 北京大学 wlw机器学习2022春季期末试题分析
  • 前端文件下载方法(包含get和post)
  • 高性能、可扩展、支持二次开发的企业电子招标采购系统源码
  • 2645. 构造有效字符串的最少插入数
  • C#,快速排序算法(Quick Sort)的非递归实现与数据可视化
  • 【操作系统xv6】学习记录2 -RISC-V Architecture
  • C++力扣题目111--二叉树的最小深度
  • 【图像拼接】源码精读:Adaptive As-Natural-As-Possible Image Stitching(AANAP/ANAP)
  • 解决docker run报错:Error response from daemon: No command specified.
  • 算法第十二天-最大整除子集
  • 简单易懂的PyTorch 损失函数:优化机器学习模型的关键
  • Kubernetes/k8s的存储卷/数据卷
  • 【漏洞复现】锐捷RG-UAC统一上网行为管理系统信息泄露漏洞
  • Android - 串口通讯(SerialPort)
  • 如何使用設置靜態住宅IP
  • 在学习爬虫前的准备
  • windows下安装oracle-win-64-11g超详细图文步骤
  • Go模板后端渲染时vue单页面冲突处理
  • 笔记本摄像头模拟监控推送RTSP流
  • 鸿蒙开发已解决-ArkTS编译时遇到arkts-no-obj-literals-as-types错误