动态加载外部css资源模型端答案

【问题标题】：Dynamically load external css resources model side动态加载外部css资源模型端
【发布时间】：2019-08-14 08:38:33
【问题描述】：

我需要动态加载外部 css 资源来更改页面的字体系列。

在我的 SPA 中，用户选择他喜欢的 UI 字体系列。所以他将字体系列从https://fonts.google.com 复制/粘贴到输入标签中，我需要相应地更改页面字体系列属性。

为此，我需要加载字体的外部资源，例如<link href="https://fonts.googleapis.com/css?family=<FONTFAMILYNAME>" rel="stylesheet">，然后更改将font-family: 'Indie Flower', cursive;分配给页面的css，使用css绑定没有问题。

如何从模型方面做到这一点？

更新

该应用是使用Aurelia js框架开发的，所以我的意思是Aurelia模型，但是（仍然在客户端）

【问题讨论】：

不清楚您所说的“模型端”是什么意思。您是在谈论从服务器而不是客户端执行此操作吗？你的问题有点不清楚。
@Geo1088 我更新了问题，现在应该更清楚了。

标签： css aurelia

【解决方案1】：

希望如你所愿

let btn = document.getElementById("btn");
let inpt = document.getElementById("inpt");
let fontsLink = document.getElementById("fontsLink");
btn.addEventListener('click', function() {
    let font = inpt.value;
    font = font.trim();
    font = font.replace(/ /g, '+');
    let link = `
        https://fonts.googleapis.com/css?family=${font}
    `
    fontsLink.href = link;
    document.querySelector('body').style.fontFamily = `${inpt.value}`;
});

* {
    box-sizing: border-box;
    font-family: inherit;
}

html {
    font-size: 62.25%;
}

body {
    font-family: sans-serif;
    font-size: 1.6rem;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello World From Gaurav</title>
    <link rel="stylesheet" href="" id="fontsLink">
</head>
<body>
    <h1 id="demo" contenteditable="true">Change Text</h1>
    <input id="inpt" type="" placeholder="Type Font Name">
    <button id="btn">Load</button>
</body>
</html>

【讨论】：

这是一个非常好的提示，但它没有使用 Aurelia 框架。顺便谢谢。
该解决方案实际上就像一个魅力，它只需要考虑与 Aurelia 应用程序一起使用，例如在索引中添加 fake 链接标签（在答案中称为 fontsLink） .ejs 文件。这不是最好的，因为这个。谢谢@guarav