JQuery查找带有颜色的样式以替换为哈希颜色代码
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQuery查找带有颜色的样式以替换为哈希颜色代码相关的知识，希望对你有一定的参考价值。
我正在使用我的jquery脚本来查找具有颜色和想要用#444444替换的rgb的样式。我在查找样式颜色时遇到了问题，因为当我尝试这样做时：
$('#text_editor').find('[style*="color: rgb(68, 68, 68)]"').css('color', '#444444');
它不会让我用颜色和rgb查找样式，因为它不会替换它。
我也尝试过这个：
$('#text_editor').find('color: rgb(68, 68, 68)').css('color', '#444444');
还有这个：
document.execCommand('foreColor', false, '#444444');
$('#text_editor').find("span[style*='color: rgb(68, 68, 68)']").css('color', '#444444');
没有区别，因为我不断得到这个：
<span style="color: rgb(68, 68, 68);">sdgsdgsdgsdgsdg</span>
这是我想要实现的目标：
<span style="color: #444444;">sdgsdgsdgsdgsdg</span>
这里是html：
<div id="text_editor" class="editor_message" hidefocus="false" aria-label="Message Body" g_editable="true" role="textbox" aria-hidden="true" aria-multiline="true" contenteditable="true" tabindex="1" style="direction: ltr; height: 500px; width: 100%; padding-left: 25px; padding-top: 18px; font-size: 16px; border-bottom: 1px solid #d1d1d1; border-right: 1px solid #d1d1d1; border-left: 1px solid #d1d1d1; overflow-y: auto;" itacorner="6,7:1,1,0,0">
<span style="color: rgb(68, 68, 68);">sdgsdgsdgsdgsdg</span>
</div>
这里是完整代码：
$(document).on('click', '#color-picker1', function(e)
$('#color-picker' + colorpicker_number + ' div').removeClass('tick-color');
$('#color-picker' + colorpicker_number).removeClass('color-picker-border');
$('#color-picker1 div').addClass('tick-color');
$('#color-picker1').addClass('color-picker-border');
colorpicker_number = 1;
alert("time to change the color 6");
document.execCommand('styleWithCSS', 0, true);
document.execCommand('foreColor', false, '#444444');
//$('#text_editor').find('[style*="color: rgb(68, 68, 68);"],color').css('color', '#444444');
$('#text_editor').find('[style*="color: rgb(68, 68, 68)]"').css('color', '#444444');
if ($('#toolbar_text_color').css('display') == 'block')
$('#toolbar_text_color').hide();
$('#text_editor').focus();
);
您能给我一个例子，如何在使用css将其替换为#444444之前找到我想要的具有rgb颜色的样式？
谢谢。
答案
您在"中的错误位置将关闭.find()的位置
而不是：
$('#text_editor').find('[style*="color: rgb(68, 68, 68)]"')
应该是：
$('#text_editor').find('[style*="color: rgb(68, 68, 68)"]')
但是，这似乎不是您的问题。如果您使用的是Chrome，则问题是颜色会使用其rgb值自动显示给您，而不管它们如何设置-您可以找到更改设置的指南from this answer
let $yourElement = $('#text_editor').find('[style*="color: rgb(68, 68, 68)"]')
$yourElement.css('color', '#FFFFFF');
$yourElement.css('background-color', 'orange');<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="text_editor" class="editor_message" contenteditable="true" tabindex="1" style="direction: ltr; height: 500px; width: 100%; padding-left: 25px; padding-top: 18px; font-size: 16px; border-bottom: 1px solid #d1d1d1; border-right: 1px solid #d1d1d1; border-left: 1px solid #d1d1d1; overflow-y: auto;">
<span style="color: rgb(68, 68, 68);">sdgsdgsdgsdgsdg</span>
</div>以上是关于JQuery查找带有颜色的样式以替换为哈希颜色代码的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 CSS（jQuery SVG 图像替换）更改 SVG 图像的颜色？
如何使用 CSS（jQuery SVG 图像替换）更改 SVG 图像的颜色？