Question

我的问题是，我试图将我在教程中看到的一些内容添加到彩虹文本中，因为我正在尝试将其添加到基于nodejs的聊天中的自定义颜色代码中。我得到＆＃34;语法错误：意外的令牌ILLEGAL＆＃34;控制台中的消息。有人可以告诉我我的错误是什么或可能为我修复它？提前谢谢。

$('head').append('<style> #chat .rainbow { background-image: -webkit-gradient( linear,     left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f),  color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9,  #ff2), color-stop(1, #f22) )!important;
  background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6,  #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
  color:transparent!important;
  -webkit-background-clip: text!important;
  background-clip: text!important; } </style>')

Answer 1

尝试：

$('head').append('<style> #chat .rainbow { background-image: -webkit-gradient( linear,     left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f),  color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9,  #ff2), color-stop(1, #f22) )!important; \
  background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6,  #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) ); \
  color:transparent!important; \
  -webkit-background-clip: text!important; \
  background-clip: text!important; } </style>');

在每行的末尾添加反斜杠告诉JavaScript引擎该字符串将继续到下一行，从而避免自动分号插入烦恼。

Answer 2

尝试将它们全部放在一行。

$('head').append('<style> #chat .rainbow { background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9,  #ff2), color-stop(1, #f22) )!important; background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6,  #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );color:transparent!important;-webkit-background-clip: text!important; background-clip: text!important; } </style>');

我担心你不能用JavaScript开始新的行。

Answer 3

使用多个字符串：

$('head').append('<style> #chat .rainbow { background-image: -webkit-gradient( linear,     left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f),  color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9,  #ff2), color-stop(1, #f22) )!important;' +
'background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6,  #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );' +
'color:transparent!important;' +
'-webkit-background-clip: text!important;' +
'background-clip: text!important; } </style>');

Answer 4

您需要将其放在一行，因为javascript默认情况下，字符串文字不能跨越多行。这可以通过在末尾添加\或者结合字符串来解决（或者只是做多个附加，但在这种情况下这没有意义，因为它是一个被添加的整个样式标记）。

尝试追加时出现非法错误

4 个答案: