时间戳

首页 > 解决方案 > 我需要在整个网站上更改字体系列，而不是一页

javascript - 我需要在整个网站上更改字体系列，而不是一页

问题描述

我正在制作一个网站，您可以在其中阅读一些文字。在一页中，文本本身。在其他 - 设置。我需要更改文本页面中的字体系列和其他选项。但是当我在那里重定向（/settings -> /text）时，所有更改都在跳过。我应该怎么做才能修复它？

/* In settings.ejs */

<span id="fontFamily">
  <i id="fontCh" class="fas fa-font"></i> 
  <p id="fontWord"> Шрифт</p>
</span>

/* In read.ejs */

<pre id="text"><%= text %></pre>


fonts = [
    'Arial, Helvetica, sans-serif',
    '"Times New Roman", Times, serif',
    '"Courier New", Courier, monospace',
    'monospace',
];

var i = 0;
document.getElementById('fontCh').addEventListener('click', () => {
    i++;
    if (i == fonts.length)
        i = 0;
});

var font = fonts[i];

document.getElementById('text').style.fontFamily = font;

以上是我尝试过的。

UPD 我认为我们都没有正确理解对方。我知道如何使用外部 css 文件。但我需要知道如何使用 javaScript 更改属性 font-family 以及最重要的是什么 - 以确保在重定向到其他页面时它不会跳过我的更改（它现在做什么）

标签： javascripthtmlcssejs

解决方案

似乎您只想在单击另一个元素时更改字体。

因此，您的原始代码有问题。要单击的项目在那里什么都没有，所以没有什么可以用鼠标单击的。

此外，您的 javascript 正在更新字体索引，但更改字体的代码在处理程序之外。

fonts = [
    'Arial, Helvetica, sans-serif',
    '"Times New Roman", Times, serif',
    '"Courier New", Courier, monospace',
    'monospace',
];
var i = 0;
document.getElementById('fontCh').addEventListener('click', () => 
{
  i++;
    if (i == fonts.length)
        i = 0;

  var font = fonts[i];

  document.getElementById('text').style.fontFamily = font;
});
<span id="fontFamily">
  <i id="fontCh" class="fas fa-font">Click here to change font</i> 
  <p id="fontWord"> Шрифт</p>
</span>

<pre id="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</pre>

var fonts = [
    'Arial, Helvetica, sans-serif',
    '"Times New Roman", Times, serif',
    '"Courier New", Courier, monospace',
    'monospace',
];

编辑

将您的 javascript 文件更改为：

// The following code will only execute when the page has loaded and is ready.
document.addEventListener('DOMContentLoaded', function()
{
    var i = 0;
    document.getElementById('fontCh').addEventListener('click', () => 
    {
        document.getElementById('textplace').style.fontFamily = fonts[i];
        i++;
        if (i == fonts.length)
            i = 0;
    });

}, false);

您的索引文件应如下所示。您以错误的方式引用文件。

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <link rel="stylesheet" href="public/css/style.css">
        <script src="https://kit.fontawesome.com/a076d05399.js"></script><link rel="stylesheet" href="https://kit-free.fontawesome.com/releases/latest/css/free.min.css" media="all">
    </head>
    <body>
        <div id="mySidenav" class="sidenav">
            <span id="read" onclick="onReadClick()"><i class="fas fa-book-open" aria-hidden="true"></i></span>
            <span id="upload" onclick="onUploadClick()"><i class="fas fa-upload" aria-hidden="true"></i></span>
            <span><i class="fas fa-upload" id="fontCh" aria-hidden="true"></i></span>
            <span id="cogs" onclick="onCogsClick()"><i class="fas fa-cogs" aria-hidden="true"></i></span>
        </div>

    <main id="main">
        <div id="for_reading">
            <h2>Читай <i class="fas fa-book-open" aria-hidden="true"></i></h2>
            <div id="textplace" style="font-family: Arial, Helvetica, sans-serif;">
                <p id="content"> ADD YOUR CONTENT HERE</p>
            </div>
        </div>

        <div id="for_uploading">
            <h2>Загрузи <i class="fas fa-upload" aria-hidden="true"></i></h2>
            <p>Загрузи, что хочешь, и читай на здоровье.</p>
            <form action="fileupload" method="POST" enctype="multipart/form-data">
                <input type="file" name="file" id="file" class="inputfile" onchange="fileAdded()">
                <label for="file">
                    <i class="fas fa-upload" aria-hidden="true"></i>
                    <span id="output">Выбери файл.</span>
                </label>
                <input type="submit" value="Upload">
            </form>
        </div>

        <div id="for_settings">

        </div>
    </main>

    <script src="public/js/javascript.js"></script>
    </body>
</html>

你还有其他一些问题。您有引用颜色（小麦/白色等）的代码和一个不起作用的文件上传器。你最好先完成一件事，然后再进行下一件事。

推荐阅读