软件开发|编程技术|编程代码|编程入门先学什么—程序设计语言

动态加载外部CSS资源模型端

收集整理的这篇文章主要介绍了动态加载外部CSS资源模型端 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

在我的SPA中,用户选择自己喜欢的UI字体系列.因此,他将字体家族从https://fonts.google.com复制/粘贴到输入标签中,我需要相应地更改页面font-family属性.

为此,我需要加载字体的外部资源,例如< link href =“ https://fonts.googleapis.com/css?family=\u0026lt;FONTFAMILYNAME\u0026gt;”. rel =“ stylesheet”>然后更改css分配的字体系列:Indie Flower,草书;到页面,使用css绑定不是问题.

我该如何从模型方面做到这一点?

更新

该应用程序是使用Aurelia js框架开发的,所以我的意思是Aurelia模型,但是(仍在客户端)

最佳答案希望这就是你的期望

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 htmlhtml lang="en"head    meta charset="UTF-8"    titleHello World From Gaurav/title    link rel="stylesheet" href="" id="fontsLink"/headbody    h1 id="demo" contenteditable="true"Change Text/h1    input id="inpt" type="" placeholder="Type Font Name"    button id="btn"Load/button/body/html

总结

以上是为你收集整理的动态加载外部CSS资源模型端 全部内容,希望文章能够帮你解决动态加载外部CSS资源模型端 所遇到的程序开发问题。