我可以在 innerHTML 中添加样式标签吗？

Posted 2023-05-07

【中文标题】我可以在 innerHTML 中添加样式标签吗？

【英文标题】：Can I add a style tag to innerHTML?

【发布时间】：2015-01-09 12:34:10

【问题描述】：

我正在尝试发布一个 innerhtml 表格。希望一个单元格中的字体大小更大。是否可以包含这样的样式标签？

cell4.innerHTML = "<style: font-size:40px>" + "John Doe" + "</style>" +  "</br>";

我尝试了以下小提琴，但它不起作用。 http://jsfiddle.net/s1dj3x8e/

【问题讨论】：

为什么这被否决了？

@Billy 它没有显示任何研究工作；没用

研究？努力？我没有尝试过字体大小的样式，只在正确答案中遗漏了“div”这个词吗？

【参考方案1】：

<style> 标记旨在成为头部内部 CSS 代码的容器，因此在这种情况下，您无法使用该元素完成您想要完成的任务。

尝试替换以下行：

cell4.innerHTML = "<style: font-size:40px>" + "John Doe" + "</style>" +  "</br>";

与：

cell4.innerHTML = "<span style='font-size:40px'>John Doe</span>";

更新了小提琴（现在使用span 而不是div，正如下面 Zach 正确指出的那样）：

http://jsfiddle.net/jbhw1qf0/

【讨论】：

您不应该使用 div 来设置文本部分的样式。我也很好奇你为什么有" + "

@ZachSaucier 我一收到你的评论就知道了。正在最小化原始代码，根本没有看到毫无意义的连接。很好奇，用 div 来设置部分样式有什么问题？跨度我通常会在里面使用，例如，一个句子来抓取一个单词。但这个上下文是整个单元格。

@DrewKennedy 这只是在语法上不正确，原因与您在文本部分中使用 spans 的原因相同。这就是他们的目的

@ZachSaucier 够公平的。你每天都会学到一些新东西，即使是这样的小事。我会改变我的答案。

@DrewKennedy 那么这与我建议的答案相同：P

【参考方案2】：

样式标签旨在包含 CSS 块，包括选择器，允许它们一次设置多个元素的样式。样式标签的所有 CSS 都应该在 <style> 标签之间。

要做你想做的事，你需要返回一个元素，该元素要么使用具有定义样式的类或内联样式，如下所示：

cell4.innerHTML = '<span style="font-size:40px">John Doe</span>';

或

cell4.innerHTML = '<span class="fs40">John Doe</span>';

CSS .fs40 font-size:40px; 在您的样式表中的位置。