<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Document</title>

    <link

      href="https://fonts.googleapis.com/css2?family=Goldman&display=swap"

      rel="stylesheet"

    />

    <link

      href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Stencil+Display&display=swap"

      rel="stylesheet"

    />

    <link

      href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap"

      rel="stylesheet"

    />

    <style>

      html {

        --font: Goldman;

      }

      html[data-theme="font2"] {

        --font: "Big Shoulders Stencil Display";

      }

      html[data-theme="font3"] {

        --font: "Pacifico";

      }

      * {

        font-size: 30pt;

        font-family: var(--font);

      }

    </style>

  </head>

  <body>

    <p>

      Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur

      facilis labore dolor perferendis illo eligendi dolores neque maxime

      obcaecati aut perspiciatis dolorum, eum at atque dolore nobis cum quis

      ducimus!

    </p>

    <button class="font1">Goldman</button>

    <button class="font2">Big Shoulders Stencil Display</button>

    <button class="font3">Pacifico</button>

    <script>

      document.querySelector(".font1").addEventListener("click", (e) => {

        document.documentElement.removeAttribute("data-theme");

      });

      document.querySelector(".font2").addEventListener("click", (e) => {

        document.documentElement.setAttribute("data-theme", "font2");

      });

      document.querySelector(".font3").addEventListener("click", (e) => {

        document.documentElement.setAttribute("data-theme", "font3");

      });

    </script>

  </body>

</html>

js 动态修改页面文本字体的更多相关文章

  1. JS动态修改页面EasyUI datebox不生效、EasyUI动态添加Class、EasyUI动态渲染解析解决方案

    这是个小菜在实际工作中遇到的问题,相信很多EasyUI新手很可能也遇到这样的问题,因此小菜觉得有必要拿出来分享一下. 这个问题要从EasyUI的datebox组件说起,小菜用这个组件的时候,发现用$( ...

  2. 微信小程序通过JS动态修改页面标题setNavigationBarTitle

    wx.setNavigationBarTitle({title: '当前页面'})

  3. 基于Vue的SPA动态修改页面title的方法

    最近基于VUE做个SPA手机端web发现动态修改页面标题通过document.title=xxxx 来修改着实蛋疼,而且在IOS的微信端据说没效果.百度发现要针对IOS的微信做点额外的操作,即:创建一 ...

  4. JS动态修改微信浏览器中的title

    JS动态修改微信浏览器中的title我们的原理是设置一个ifame然后我们再加载一下就可以实现了,具体的例子如下所示． 平时使用JS修改title,直接document.title=新标题就好了 这样 ...

  5. 微信小程序动态修改页面标题setNavigationBarTitle

    微信小程序是可以动态修改页面标题的. 首先我们来看看静态是怎么实现的 在对应页面的json文件里面加入下面代码就可以实现了 { "navigationBarTitleText": ...

  6. 微信小程序 JS动态修改样式

    微信小程序这个坑啊,js动态修改样式,我们并不能用js或者jq 轻轻松松一行代码搞定.或者用removeClass addClass 来修改样式. 以下是一种动态修改样式的方法,原理是绑定数据,然后动 ...

  7. 微信小程序——动态修改页面数据(和样式)及参数传递

    1.1.1动态修改页面数据 在小程序中我们经常要动态渲染数据,对于新手而言我们常常遇到修改的数据在控制台显示和页面显示不一致,因为我们用“=”修改数据的,这种是可以修改,但无法改变页面的状态的,还会造 ...

  8. js动态修改Easyui元素不生效,EasyUI动态渲染解析解决方案

    easyui的渲染是在在网页加载完成后,相当于在$(document).ready()事件中,对整个网页进行了一次扫描,发现某个input标签含有easyui的属性,就在相应的地方进行ui的修改.因此 ...

  9. [HTML]js动态修改表格里面的内容

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/T ...

随机推荐

  1. LOJ10202樱花——数论

    题目描述 原题来自:HackerRank Equations 求不定方程: 1/x+1/y=1/n! 的正整数解 (x,y) 的数目. 输入格式 一个整数 n . 输出格式 一个整数,表示有多少对 ( ...

  2. 精通MySQL之锁篇

    老刘是即将找工作的研究生,自学大数据开发,一路走来,感慨颇深,网上大数据的资料良莠不齐,于是想写一份详细的大数据开发指南.这份指南把大数据的[基础知识][框架分析][源码理解]都用自己的话描述出来,让 ...

  3. Java8中流的性能

    流(Stream)是Java8为了实现最佳性能而引入的一个全新的概念.在过去的几年中,随着硬件的持续发展,编程方式已经发生了巨大的改变,程序的性能也随着并行处理.实时.云和其他一些编程方法的出现而得到 ...

  4. Docker -- 日志

    docker 的两总日志 引擎日志 容器日志 引擎日志 简介: Docker 引擎日志就是 dockerd 运行时的日志 在CentOS 7系统中,Docker 引擎日志一般是交给 systemd来管 ...

  5. checkAll操作

    //全部勾选 function checkAll(obj) { var cols = document.getElementsByName('cols'); for ( var i = 0; null ...

  6. shell（shell简介）

    1.shell 简介 Shell 是一个 C 语言编写的脚本语言,它是用户与 Linux 的桥梁,用户输入命令交给 Shell 处理,shell是一个命令解释器,是一个工具箱, Shell 将相应的操 ...

  7. 飞塔5.4和5.6版本IPSec互备冗余测试

    主电信.备联通:测试方法:修改诚盈的IPSec,将阶段一电信的对端地址改为错误的. 方法一: 通过静态路由的管理距离:电信设置为10:联通为15.经测试,可以实现自动切换,且电信恢复后 可以切换回电信 ...

  8. SPOJ - PHRASES Relevant Phrases of Annihilation

    传送门:SPOJ - PHRASES(后缀数组+二分) 题意:给你n个字符串,找出一个最长的子串,他必须在每次字符串中都出现至少两次. 题解:被自己蠢哭...记录一下自己憨憨的操作,还一度质疑评测鸡( ...

  9. Bézout恒等式

    写在前面: 记录了个人的学习过程,同时方便复习 整理自网络 非原创部分会标明出处 目录 结论 证明 拓展 n个整数间 拓展欧几里得算法 拓展欧几里得算法的多解 结论 (Bézout / 裴蜀 / 贝祖 ...

  10. 牛客小白月赛28 J.树上行走 (并查集,dfs)

    题意:有\(n\)个点,\(n-1\)条边,每个点的类型是\(0\)或\(1\),现在让你选一个点,然后所有与该点类型不同的点直接消失,问选哪些点之后,该点所在的联通块最大. 题解: 因为选完之后两个 ...