Question

我正在使用这样的javascript创建div样式：

var div = document.createElement("div");
div.setAttribute('style',  'box-shadow: 10px 10px 50px #888888; \
                            background-color: #ffb734; \
                            etc...
                           ');

当我从chrome扩展内容脚本插入div时，我必须这样做。

如果我将字体myFont.ttf下载到同一目录，如何更改字体？

这是我尝试过的：

var div = document.createElement("div");
div.setAttribute('style',  'box-shadow: 10px 10px 50px #888888; \
                            background-color: #ffb734; \
                            @font-face {\
                                font-family: '" + 'openSans' + "'; \
                                src: url('" + 'OpenSans-Semibold.ttf' + "') \
                            } \
                           ');

但这打破了div（它停止显示）

提前致谢！

P.S。这是一种更好的方法来制作一个css文件并将其包含在我的清单中吗？

Answer 1

The value of the style attribute must match the syntax of the contents of a CSS declaration block (excluding the delimiting braces).

这意味着在该上下文中不允许at-rules。

Answer 2

您是否尝试构建用户可以更改的动态文本框？如果是这样，此答案将指导您创建一个https://stackoverflow.com/a/8957518/5914723

如果没有，那么这里有一些将修改div的JS。您正在使用此代码，HTML和CSS修改HTML DOM。 https://jsfiddle.net/Dneilsen22/ohodgo7u/

HTML：空div

<div id="changeMe"></div>

JS

var changeMe = document.getElementById("changeMe");
changeMe.innerHTML = "You can style me too!";
document.getElementById("changeMe").style.font = "bold 40px serif";

Answer 3

font-face应该在外部css文件中指定，是的，它是制作css文件并将其包含在清单中的更好方法。

BTW，使用+而不是\来打破多行中的字符串。后者是not preferred。

使用setAttribute（javascript）设置font-face / font-family

3 个答案: