我想改变<code>内元素的颜色标签不工作

i want to change color of elements within <code> tag not working

本文关键字：颜色 工作 标签 元素 改变 code      更新时间：2023-09-26

我正试图改变仅在<code>标签内但不工作的元素的颜色。

我不想使用document。GetElementByID按照这里的答案getElementsByTagName在JavaScript

下面是我的原始代码。

<div id="wmd-post">
<code>
<p>&lt;/span&gt;</p> <!-- i would want only this to change color -->
</code>
 
<p>&lt;/span&gt;</p>  <!-- i would NOT want this to change color -->
</div>
<script>
 
var text = document.getElementById("wmd-post"); 
var str = text.innerHTML;
str = str.replace(/&lt;'/span&gt;/g, '<span style="color:red">&lt;/span&gt;</span>'); 
document.getElementById("wmd-post").innerHTML = str;
</script>

我试过的是

<div id="wmd-post">
<code>
  <p>&lt;/span&gt;</p>
</code>
 
<p>&lt;/span&gt;</p>  
</div>
<script>
 
var text = document.getElementsByTagName('code');
var str = text.innerHTML;
for(var i = 0; i < str.length; i++)
{
        str[i] = str.replace(/&lt;'/span&gt;/g, '<span style="color:red">&lt;/span&gt;</span>');
        document.getElementsByTagName("code").innerHTML = str[i];
}
</script>

我还是不知道你为什么不使用css，但这里是:

html: 

<div id="wmd-post">
<code>
  <p>&lt;/span&gt;</p>
</code>
<p>&lt;/span&gt;</p>  
</div>

JS: 

var text = document.getElementsByTagName('code')[0];
var str = text.innerHTML;
str = str.replace(/&lt;'/span&gt;/g, '<span style="color:red">&lt;/span&gt;</span>');
document.getElementsByTagName("code")[0].innerHTML = str;

小提琴:https://jsfiddle.net/u8ystwyg/1/

一个仅适用于css的解决方案:

<style>
  code { color: red; }
</style>
<div id="wmd-post">
<code>
  <p>&lt;/span&gt;</p>
</code>
<p>&lt;/span&gt;</p>  
</div>

请点击这里

你只需要改变你的代码的一个脚本，这是脚本。

var text = document.getElementsByTagName('code');
var str = text[0].innerHTML;
            
str = str.replace(/&lt;'/span&gt;/g, '<span style="color:red">&lt;/span&gt;</span>');
document.getElementsByTagName("code")[0].innerHTML = str;

你的问题在被另一个用户编辑掉之前有一个jQuery标签。如果你想使用jQuery，这里有一个解决方案。

$(document).ready(function() {
    $("#wmd-post > code").css("color", "red");
});

查看JSFiddle

document.getElementsByTagName返回一个NodeList，而不是单个元素。你需要遍历列表。

var codes = document.getElementsByTagName('code');
for (var i = 0; i < codes.length; i++) {
  var str = codes[i].innerHTML;
  str = str.replace(/&lt;'/span&gt;/g, '<span style="color:red">&lt;/span&gt;</span>');
  codes[i].innerHTML = str;
}
<div id="wmd-post">
  <code>
  <p>&lt;/span&gt;</p>
</code>
  <p>&lt;/span&gt;</p>
</div>

这里有一个使用Element.getElementsByTagName()的工作示例，它基本上获得具有指定标记(在您的情况下code标记)的文档中的所有元素。你可以使用string .prototype.replace()来替换"target"字符串。

(function(){
var text = document.getElementsByTagName('code'),
str = text[0].innerHTML;
str = str.replace(/&lt;'/span&gt;/g, '<span class="red">&lt;/span&gt;</span>');
text[0].innerHTML = str;
})();
.red{
  color:red;
}
<div id="wmd-post">
<code>
  <p>&lt;/span&gt;</p>
</code>
 <p>&lt;/span&gt;</p>  
</div>

相关文章：