我正试图改变仅在<code>
标签内但不工作的元素的颜色。
我不想使用document。GetElementByID按照这里的答案getElementsByTagName在JavaScript
下面是我的原始代码。
<div id="wmd-post">
<code>
<p></span></p> <!-- i would want only this to change color -->
</code>
<p></span></p> <!-- i would NOT want this to change color -->
</div>
<script>
var text = document.getElementById("wmd-post");
var str = text.innerHTML;
str = str.replace(/</span>/g, '<span style="color:red"></span></span>');
document.getElementById("wmd-post").innerHTML = str;
</script>
我试过的是
<div id="wmd-post">
<code>
<p></span></p>
</code>
<p></span></p>
</div>
<script>
var text = document.getElementsByTagName('code');
var str = text.innerHTML;
for(var i = 0; i < str.length; i++)
{
str[i] = str.replace(/</span>/g, '<span style="color:red"></span></span>');
document.getElementsByTagName("code").innerHTML = str[i];
}
</script>
我还是不知道你为什么不使用css,但这里是:
html:<div id="wmd-post">
<code>
<p></span></p>
</code>
<p></span></p>
</div>
JS:
var text = document.getElementsByTagName('code')[0];
var str = text.innerHTML;
str = str.replace(/</span>/g, '<span style="color:red"></span></span>');
document.getElementsByTagName("code")[0].innerHTML = str;
小提琴:https://jsfiddle.net/u8ystwyg/1/
一个仅适用于css的解决方案:
<style>
code { color: red; }
</style>
<div id="wmd-post">
<code>
<p></span></p>
</code>
<p></span></p>
</div>
请点击这里
你只需要改变你的代码的一个脚本,这是脚本。
var text = document.getElementsByTagName('code');
var str = text[0].innerHTML;
str = str.replace(/</span>/g, '<span style="color:red"></span></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(/</span>/g, '<span style="color:red"></span></span>');
codes[i].innerHTML = str;
}
<div id="wmd-post">
<code>
<p></span></p>
</code>
<p></span></p>
</div>
这里有一个使用Element.getElementsByTagName()的工作示例,它基本上获得具有指定标记(在您的情况下code
标记)的文档中的所有元素。你可以使用string .prototype.replace()来替换"target"字符串。
(function(){
var text = document.getElementsByTagName('code'),
str = text[0].innerHTML;
str = str.replace(/</span>/g, '<span class="red"></span></span>');
text[0].innerHTML = str;
})();
.red{
color:red;
}
<div id="wmd-post">
<code>
<p></span></p>
</code>
<p></span></p>
</div>