Question

所以我正在开发一个Chrome / Firefox扩展程序，它将查找特定元素并在其中提取innerHTML。在那之后，我需要设计它并使背景变红。我正在努力的部分是，只要这个元素根据其id包含数据，背景颜色就会变为红色。我正在使用appendTo（'head'）作为css。

var message = $(node).find('span.mention.style-scope.yt-live-chat-text-message-renderer');
if (message.length < 1) return;
var messageID = $('.style-scope yt-live-chat-text-message-renderer').attr('id');
$('<style type="text/css">.style-scope yt-live-chat-text-message-renderer #id' + messageID + ' { background-color: #FF0000; }</style>').appendTo('head');

最后一行是问题。我之前使用过这段代码，但没有附上id，所以我不知道从哪里开始。

任何指针都会很棒，如果您需要更多信息，我可以尽力为您提供。谢谢！

编辑：

这就是我想要的目标：

<yt-live-chat-text-message-renderer class="style-scope yt-live-chat-item-list-renderer x-scope yt-live-chat-text-message-renderer-0" id="CjkKGkNLYlR2dUNlNjlNQ0ZVT3ZxZ29kR2FrS3ZREhtDTDdxejlxZTY5TUNGY25YbkFvZGR2a0JjdzA%3D" author-type="">

Answer 1

#id' + messageID + '实际上呈现为#id<messageId>而不是#<messageId>

您在.旁边缺少类标识yt-..，因此css无法找到该元素。

另外，您可以使用ID来引用该元素，无需添加任何其他类，如.style-scope .yt-live-chat-item-list...，因为该ID对于页面是唯一的。

添加类似这样的东西是非常糟糕的做法。

Answer 2

删除 #id + messageID 并使用＃+ messageID。请参考以下代码：

$('<style type="text/css">.style-scope yt-live-chat-text-message-renderer #' + messageID + ' { background-color: #FF0000; }</style>').appendTo('head');

您的代码包含％符号，因为CSS编译器无法找到选择器

基于ID的自定义CSS和appendTo（'head'）

2 个答案: