javascript - 如何仅使用 javascript 设置字体系列 - 无法访问 jquery、html 或 css，只能访问 js

Question

我正在使用 DirectSmile 为 EFI 数字店面构建打印产品，DirectSmile 是一种插入 InDesign 和数字店面的可变数据程序。可以使用 JavaScript 在 DirectSmile 中完成变量数据字段的复杂格式化。

我可以添加 javascript 进行格式化，但是没有可以与 js 结合使用的 css 或 html。我只是将 js 片段添加到变量数据字段，保存并导出文件，然后上传到 Digital Storefront。

javascript > 可变数据字段 > Directsmile 文档 > 压缩产品 > 数字店面

现在我正在制作名片。它显示的电话号码如下:

办公室123.456.7890
手机 123.456.7890
传真123.456.7890

其中“Office”、“Cell”和“Fax”一词应采用一种字体(8pt Archer 粗体)，而数字应采用另一种字体(8pt Graphik Light)。这需要在 JavaScript 中定义，但我不知道如何定义。我对此很陌生，而且研究还没有成功——我发现的每种方法似乎都需要访问 html/css，而我没有。

这是我过去用来格式化电话号码的 JavaScript，因此前面的标签(“Office”“Cell”“Fax”)仅在客户使用关联的电话号码时才会出现，并格式化电话号码本身:

function numbers(){
    out = ""
    num = VAR.GetS("Office_Phone", "")       if(num.length>0) out += "OFFICE" + phone(num) + "\n";  else out = "" + out;
    num = VAR.GetS("Cell_Phone", "")         if(num.length>0) out += "CELL" + phone(num) + "\n";  else out = "" + out;
    num = VAR.GetS("Fax", "")                if(num.length>0) out += "FAX" + phone(num) + "\n";  else out = "" + out;
    return out;
}

function phone(number){
    tmp = ""; div = ".";
    if( number.length>0 ){
        tmp = number.replace(/\D/g, "");
        var len = tmp.length;
        tmp = tmp.split("");
        tmp.splice(len-7,0, div);
        tmp.splice(len-3,0, div);
        tmp = tmp.join("");
    }
    return tmp;
}

我可以添加/更改什么以使前面的标签(“Office”“Cell”“Fax”)显示为 8pt Archer 粗体，电话号码显示为 8pt Graphik Light？

非常感谢所有帮助。谢谢

Answer 1

注意:此响应仅适用于标准 HTML

它似乎与问题中最初要求的 DirectSmile 无关。对于那些寻求通过普通 Javascript 在纯 HTML 元素上设置 fontFamily 的人来说，响应可能会很有用。否则请忽略。

要在 JavaScript 中设置项目的样式属性:

var el = document.getElementById('theelementid');
el.style.fontFamily = 'Graphik Light';

为此，您需要识别特定的 DOM 元素 ID 来定位您的 javascript。

如果您只有 block 的 ID，则可能需要扩展概念以通过 block 内的标签名称来识别项目。例如，以下代码将使用 id="blockid" 将字体系列样式应用于外部 block 中的每个 span 元素:

var block = document.getElementById('blockid');
var els = block.getElementsByTagName('span');
for(var i in els){
  if(els.hasOwnProperty(i)){
    var el = els[i];
    el.style.fontFamily = 'Graphik Light';
  }
}