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.hqwc.cn/news/336772.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

14:00进去,14:05就出来了,面试问的有点变态。。

刚从小厂出来&#xff0c;没想到在另一家公司我又寄了。 在这家公司上班&#xff0c;每天都要加班&#xff0c;但看在钱给的比较多的份上&#xff0c;也就不太计较了。但万万没想到一纸通知&#xff0c;所有人不准加班了&#xff0c;不仅加班费没有了&#xff0c;薪资还要降40…

Java中内存模型

参数传递图解与结论 通过上面的两段程序可以得出如下结论&#xff1a;根据内存去解释&#xff0c;局部变量随方法栈的弹出而消失&#xff1b; 当调用方法时&#xff0c;如果传入的数值为基本数据类型&#xff08;包含String类型&#xff09;&#xff0c;形式参数的改变对实际…

前端常用6种数据加密方式的使用(最详解)

目录 前言 一、6种常用加密方案 1.Base64加密 2.MD5加密&#xff08;不可逆&#xff09; 3.sha256加密 4.sha1加密&#xff08;相比于MD5 安全性高&#xff0c;但是 速度慢&#xff09; 5.AES加密 6.字符串的编码和解码 二、结语 往期回顾 前言 相信大家在工作或面试…

苹果电脑Markdown文本编辑Typora mac功能介绍

Typora mac是一款跨平台的Markdown编辑器&#xff0c;支持Windows、MacOS和Linux操作系统。它具有实时预览功能&#xff0c;能够自动将Markdown文本转换为漂亮的排版效果&#xff0c;让用户专注于写作内容而不必关心格式调整。Typora Mac版除了支持常见的Markdown语法外&#x…

【JVM】执行引擎 Execution Engine

一、简介 执行引擎是Java虚拟机&#xff08;JVM&#xff09;的核心组成部分之一&#xff0c;它的主要任务是负责装载字节码到其内部。由于字节码并不能够直接运行在操作系统之上&#xff0c;因此需要将字节码指令解释/编译为对应平台的本地机器指令&#xff0c;简单来说JVM的执…

2024年湖北建筑类中级职称申报哪里有?

武汉、湖北省直、黄石、黄冈、宜昌、襄阳、恩施、荆门、荆州、孝感、咸宁、十堰、神龙架、天门、潜江、仙桃、汉口、汉阳、武昌、东湖高新等湖北所有地方职称都可以申报代办。 职称无非就是一些申报条件、申报时间、申报流程、提交资料、评审答辩等相关问题&#xff0c;这些了…

09、Kafka ------ 通过修改保存时间来删除消息(retention.ms 配置)

目录 通过修改保存时间来删除消息★ 删除指定主题的消息演示1、修改kafka检查过期消息的时间间隔2、修改主题下消息的过期时间3、查看修改是否生效4、先查看下主题下有没有消息5、添加几条消息看效果6、查看消息是否被删除 ★ 恢复主题的retention.ms配置1、先查看没修改前的te…

FPGA之按键消抖

目录 1.原理 2.代码 2.1 key_filter.v 2.2 tb_key_filter.v 1.原理 按键分为自锁式按键和机械按键&#xff0c;图左边为自锁式按键 上图为RS触发器硬件消抖&#xff0c;当按键的个数比较多时常常使用软件消抖。硬件消抖会使用额外的器件占用电路板上的空间。 思路就是使用延…

wagtail的一个简单blog示例

前提 已正确配置python虚拟环境 https://blog.csdn.net/gsl371/article/details/117917857 已创建wagtail项目 https://blog.csdn.net/gsl371/article/details/134569335 创建应用 (env) C:\djproject\wagprj\mysite>python manage.py startapp blog配置修改 在配置文件…

Cesium笔记 viewer控件隐藏

Cesium初始化后&#xff0c;场景中会有时间轴&#xff0c;动画&#xff0c;home等控件显示&#xff0c;需要将这些控件隐藏&#xff0c;如下&#xff1a; init() {let viewer new Cesium.Viewer("cesiumContainer", {fullscreenButton: false, // 隐藏界面右下角全…

STL——vector详解

目录 &#x1f4a1;基本概念 &#x1f4a1;存放内置数据类型 &#x1f4a1;存放自定义数据类型 &#x1f4a1;存放自定义数据类型指针 &#x1f4a1;vector容器嵌套容器 &#x1f4a1;vector构造函数 &#x1f4a1;vector赋值操作 &#x1f4a1;vector容量和大小 &…

vulhub中的Nginx漏洞的详细解析

Nginx漏洞 1.cd到nginx_parsing_vulnerability cd /opt/vulhub/nginx/nginx_parsing_vulnerability 2.执行docker-compose up -d 3.查看靶场是否开启成功 dooker ps 4.访问浏览器 因为这里是80端口所以直接使用ip就能访问成功 5.上传图片 注意这里的图片是含有一句话木马的图…