<!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. 使用jiffies的时间比较函数time_after、time_before

    1. jiffies简介 首先,操作系统有个系统专用定时器(system timer),俗称滴答定时器,或者系统心跳. 全局变量jiffies取值为自操作系统启动以来的时钟滴答的数目,在头文件< ...

  2. 扩展欧几里得（exgcd）及其应用

    定义 扩展欧几里得算法是用来在已知一组 \((a,b)\) 的时,求解一组 \((x,y)\) 使得 \[ax+by=gcd(a,b) \] 思想 and 板子 根据相关的知识可以得到 \[gcd(a ...

  3. SpringMVC听课笔记（九：数据转换 & 数据格式化 & 数据校验）

    1.数据绑定流程 --1). Spring MVC主框架将ServletRequest对象及目标方法入参实例传递给WebDataBinderFactory实例,以创建DataBinder实例对象. - ...

  4. JavaScript——事件

    事件:是由访问Web页面的用户引起一系列操作. 事件的作用:用于浏览器和用户的交互 以下代码为相关试验代码: HTML事件: <script type="text/javascript ...

  5. python模块----paramicko模块 （ssh远程主机并命令或传文件）

    paramiko模块 paramicko模块是非标准库模块,需要pip下载 paramicko:模拟ssh登陆linux主机,也有上传下载功能.ansible自动化部署软件底层就有应用paramick ...

  6. java使用Test测试接口类

    package com.jy.demo.web; import java.util.Map; import org.junit.BeforeClass; import org.junit.Test; ...

  7. 利用PWM脉宽调制实现呼吸灯

    1.设计目标 完成一个呼吸灯,从亮到灭的时间为2秒,从灭到亮的时间为2秒,以此不断往复. 2.设计步骤 2.1设计分析 利用PWM(脉冲宽度调制)实现led灯亮度的变化,只需要改变占空比就可以实现,具 ...

  8. GPLT L2-006 树的遍历（二叉树）

    题意: 给定一棵二叉树的后序遍历和中序遍历,请你输出其层序遍历的序列.这里假设键值都是互不相等的正整数. 思路: 后序遍历序列 = 左子树遍历序列 + 右子树遍历序列 + 根节点. 中序遍历序列 = ...

  9. ZOJ3640-Help Me Escape 概率dp

    题意: 在一个迷宫中有n条路经,你会被随机传送到一条路径,每条路径有一个挑战难度ci,你最初有一个战斗力f,如果你的战斗力大于ci,那么呆在那里ti天就可以成功逃出迷宫.如果你的战斗力小于等于ci,那 ...

  10. 2020杭电多校 C / HDU 6879 - Mine Sweeper

    题意: t组输入,每组输入一个s 你需要输出一个r行c列的阵列,这个阵列中'X'代表炸弹,'.'表示没有炸弹 对于'.'这些位置都会有一个数值,这个值取决于这个位置附近8个位置,这8个位置一共有几个炸 ...