<!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. c++ 三五法则 自己理解

    简介 三五法则规定了什么时候需要  1 拷贝构造函数   2 拷贝赋值函数  3 析构函数 1. 需要析构函数的类也需要拷贝构造函数和拷贝赋值函数. 通常,若一个类需要析构函数,则代表其合成的析构函数 ...

  2. python3编码转换

    str->bytes:encode编码 bytes->str:decode解码 字符串通过编码成为字节码,字节码通过解码成为字符串. >>> text = '我是文本' ...

  3. 图的深度优先遍历算法（DFS）

    搜索算法有很多种,本次文章主要分享图(无向图)的深度优先算法.深度优先算法(DFS)主要是应用于搜索中,早期是在爬虫中使用.其主要的思想有如下: 1.先访问一个节点v,然后标记为已被访问过2.找到第一 ...

  4. dedecms后台更新网站栏目无反应的解决方法

    dedecms进行第二次模板开发后,遇到在栏目更新的时候没有反应,但是用回原来的初始模板就可以,百度查找了很多的教程也无法进行解决,就这样慢慢的摸索.终于找到了问题的所在,原因可能是该更新的时候无法获 ...

  5. G - 跑跑卡丁车

    跑跑卡丁车是时下一款流行的网络休闲游戏,你可以在这虚拟的世界里体验驾驶的乐趣.这款游戏的特别之处是你可以通过漂移来获得一种加速卡,用这种加速卡可以在有限的时间里提高你的速度.为了使问题简单化,我们假设 ...

  6. 2019牛客暑期多校训练营(第九场) D Knapsack Cryptosystem

    题目 题意: 给你n(最大36)个数,让你从这n个数里面找出来一些数,使这些数的和等于s(题目输入),用到的数输出1,没有用到的数输出0 例如:3  4 2 3 4 输出:0 0 1 题解: 认真想一 ...

  7. Codeforces Round #570 (Div. 3) E. Subsequences (easy version) (搜索,STL)

    题意:有一长度为\(n\)的字符串,要求得到\(k\)不同的它的子序列(可以是空串),每个子序列有\(|n|-|t|\)的贡献,求合法情况下的最小贡献. 题解:直接撸个爆搜找出所有子序列然后放到set ...

  8. Codeforces #624 div3 C

    You want to perform the combo on your opponent in one popular fighting game. The combo is the string ...

  9. Codeforces Round #672 (Div. 2 B. Rock and Lever (位运算)

    题意:给你一组数,求有多少对\((i,j)\),使得\(a_{i}\)&\(a_{j}\ge a_{i}\ xor\ a_{j}\). 题解:对于任意两个数的二进制来说,他们的最高位要么相同要 ...

  10. WPF Dispatcher 频繁调度导致的性能问题

    问题 WPF Dispatcher 提供了UI线程之外的线程异步操作(请求)UI变化.一次Invoke/BeginInvoke调用产生一个DispatcherOperation,将挂在调度队列中,按照 ...