<!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. 关于MongoDB的简单理解（二）--Java篇

    一.声明 本文依赖于 MongoDB JVM DRIVERS 4.1 版本编写. 本文案例依赖于 Maven 项目管理工具. 二.本文主要讲解哪些内容? 如何连接到MongoDB 通过TLS/SSL连 ...

  2. 「NOIP2009」最优贸易

    「NOIP2009」最优贸易 「NOIP2009」最优贸易内存限制:128 MiB时间限制:1000 ms 题目描述C 国有 n 个大城市和 m 条道路,每条道路连接这 n 个城市中的某两个城市.任意 ...

  3. Opencart 后台getshell

    朋友实战中遇到的,帮忙看后台getshell. 修改日志文件,但是奈何找不到warning这类等级的错误,没办法控制写入的内容,通过sql报错能写入了,但是尖括号却会被实体,使用16进制一样会实体.. ...

  4. JVM虚拟机Class类文件研究分析

    前言 为了研究Class文件,先编写一个最简单的代码: package com.courage; public class T0100_ByteCode01 { } 之所以说最简单,是因为这个类里面任 ...

  5. Struts 2学习（二）

    文章目录 @[toc] #动态结果 配置时不知道执行后的结果是哪一个,运行时才知道哪个结果作为视图显示给用户. #全局结果 全局就结果可满足一个包中多个Action共享一个结果. 全局结果位于pack ...

  6. cassandra权威指南读书笔记--Cassandra架构(3)

    分阶段事件驱动架构 SEDASEDA(Staged Event-Driven Architecture)的核心思想是把一个请求处理过程分成几个Stage,不同资源消耗的Stage使用不同数量的线程来处 ...

  7. Elasticsearch 之 Filter 与 Query 有啥不同？

    今天来了解下 Elasticsearch(以下简称 ES) 中的 Query 和 Filter. 在 ES 中,提供了 Query 和 Filter 两种搜索: Query Context:会对搜索进 ...

  8. Codeforces Round #646 (Div. 2) E. Tree Shuffling（树上dp）

    题目链接:https://codeforces.com/contest/1363/problem/E 题意 有一棵 $n$ 个结点,根为结点 $1$ 的树,每个结点有一个选取代价 $a_i$,当前 $ ...

  9. The Balance HDU - 1709 母函数（板子变化）

    题意: 现在你被要求用天平和一些砝码来量一剂药.当然,这并不总是可以做到的.所以你应该找出那些不能从范围[1,S]中测量出来的品质.S是所有重量的总质量. 输入一个n,后面有n个数,表示这n个物品的质 ...

  10. Codeforces Round #653 (Div. 3) A. Required Remainder (数学)

    题意:有三个正整数\(x,y,n\),再\(1\)~\(n\)中找一个最大的数\(k\),使得\(k\ mod\ x=y\). 题解:先记\(tmp=n/x\),再判断\(tmp*x+y\)的值是否大 ...