Question

所以我需要将属性media =“ All”添加到这两个链接标记


<link rel="stylesheet" href="/etc.clientlibs/farmers/clientlibs/clientlib-libraries.css" type="text/css">
<link rel="stylesheet" href="/etc.clientlibs/farmers/clientlibs/clientlib-base.css" type="text/css">

但是我的本地html文件被配置为


<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html">
    <sly data-sly-call="${clientlib.css @ categories=['farmers.new.libraries','farmers.new.base']}" /> </sly>

这是一种称为HTL的语言，即html模板语言。有一种方法可以通过HTL添加属性，但是您需要在后端创建一个完整的java类并调用它，这很麻烦。

我想知道是否可以添加一些JavaScript以将属性media =“ all”附加到这些特定的CSS文件路径的链接标记中

我当时正在考虑将两个路径都放在div中然后使用javascript找到该div并将属性附加到该div中的每个链接标记。

var head = document.getElementsByTagName('head');
var element = document.createElement('link');
element.rel = 'stylesheet';
element.type = 'text/css';
element.href = '/etc.clientlibs/farmers/clientlibs/clientlib-libraries.css';

//here's the magic
element.media = 'all';
head.appendChild(element, head.firstChild);
setTimeout(function () {
    element.media = 'all';
});

正在创建脚本标签的地方，我想为此添加async =“”

<!--/* Include Context Hub */-->
<sly data-sly-call="${clientlib.js @ categories='granite.utils'}" />
<sly data-sly-resource="${'contexthub' @ resourceType='granite/contexthub/components/contexthub'}" />

Answer 1

是的，看起来不错。但是您的代码有一个错误。您应该从集合中获取第一个元素，以访问<head></head>元素。

var head = document.getElementsByTagName('head')[0];

Answer 2

您为什么要这么做？只是不要使用clientlib机制。无论如何，大多数前端开发人员都会使用他们的IDE来构建和最小化CSS和JS，因此，如果您在构建时导入这些工件并按照需要的方式直接在代码中添加标签，就不会有太多损失。

如何将属性添加到在运行时创建的标签中

2 个答案: