如何仅使用javascript用颜色填充元素？（不更改背景色，但填充整个元素顶部的颜色）

我对编码一无所知，我被迫在学校做一个编码项目，我感到绝望

这是我得到的一段代码：

var x = document.getElementsByClassName("yt-simple-endpoint style-scope yt-formatted-string ");
var i;
for (i = 0; i < x.length; i++) {
    x[i].style.backgroundColor = "blue";
}

var x=document.getElementsByClassName（“yt简单端点样式范围yt格式化字符串”）；
var i；
对于（i=0；i

如果你转到Youtube主页并将其粘贴到浏览器中的开发者控制台上，它会将频道名称的背景颜色更改为蓝色

但这不是我想要的

我想在频道名称的顶部填充颜色。因此，您应该只看到蓝色矩形，而不看到通道名称

我还想在蓝色矩形上添加文本，最好能够控制蓝色矩形的不透明度

由于我没有建立网站，我想我只能在开发者控制台上使用javascript，而不能使用CSS来完成这项工作

有什么建议吗？谢谢。

var x=document.getElementsByClassName（“yt简单端点样式范围yt格式化字符串”）；
var x = document.getElementsByClassName("yt-simple-endpoint style-scope yt-formatted-string ");
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "blue";  

  x[i].innerText="Something"; /* You can replace text what you want to see*/
  x[i].style.opacity = '0.5'; /* Also you can change opacity */ 
  x[i].style.color = "red"; /* You can change text color */
}

var i；
对于（i=0；i

---

尝试更改文本颜色

您可以更改任何内容，例如：

window.addEventListener（“DOMContentLoaded”，（）=>{
常量元素=[document.getElementById（“youtuber名称框”），
document.getElementById（“youtuber名称”）]；
/*访问此样式*/
元素[0]。style.backgroundColor=“蓝色”；//背景颜色
var=1；
函数r（）{
如果（padding<80）{padding+=1；元素[0].setAttribute（“style”，“padding:+padding+“px”）；
setTimeout（（）=>{r（）；}，50）；
}
如果（padding==79）{//last
元素[1]。style.fontSize=“35px”；
元素[1]。style.fontfamine=“monospace”；
元素[1]。style.color=“黑色”；
}
}
r（）；
});
#youtuber名称框{
背景色：灰色；显示：表格；填充：10px；
}

冰毒
通过将文本颜色更改为透明，Young Kyun Jin的答案与我想要的最接近

但这仍然不是我想要的。因为我无法在蓝色矩形中添加新文本。新文本也将是透明的

tps://i.stack.imgur.com/5XoOK.png

我想我不能简单地将文本更改为透明，因为我不能通过将图像更改为透明来隐藏图像

我想我可能会以某种方式创建一个新元素，并以某种方式将其完全置于现有元素之上。我有一段代码可以做到这一点，但不完全是：

var x = document.getElementsByClassName("yt-simple-endpoint style-scope yt-formatted-string ");
var i;

var canvas = document.createElement('canvas'); //Create a canvas element
//Set canvas width/height
canvas.style.width='100%';
canvas.style.height='100%';
//Set canvas drawing area width/height
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
//Position canvas
canvas.style.position='absolute';
canvas.style.left=0;
canvas.style.top=0;
canvas.style.zIndex=100000;
canvas.style.pointerEvents='none'; //Make sure you can click 'through' the     canvas
document.body.appendChild(canvas); //Append canvas to body element
var context = canvas.getContext('2d');

for (i = 0; i < x.length; i++) {
    context.rect(x[i].getBoundingClientRect().left+scrollX , x[i].getBoundingClientRect().top+scrollY , x[i].getBoundingClientRect().width, x[i].getBoundingClientRect().height);
    context.fillStyle = 'blue';
    context.fill();
}    

var x=document.getElementsByClassName（“yt简单端点样式范围yt格式化字符串”）；
var i；
var canvas=document.createElement（'canvas'）//创建画布元素
//设置画布宽度/高度
canvas.style.width='100%'；
canvas.style.height='100%'；
//设置画布绘图区域的宽度/高度
canvas.width=window.innerWidth；
canvas.height=window.innerHeight；
//位置画布
canvas.style.position='absolute'；
canvas.style.left=0；
canvas.style.top=0；
canvas.style.zIndex=100000；
canvas.style.pointerEvents='none'//确保您可以单击“穿过”画布
document.body.appendChild（画布）//将画布附加到body元素
var context=canvas.getContext（'2d'）；
对于（i=0；i

但由此创建的矩形并不完全正确

它并没有完全放置在元素的顶部。它只是随着画布滚动。因此，即使滚动时元素不移动，矩形仍会滚动
由于某些原因，矩形没有正确放置在第一个位置。（我正在使用Chrome开发者控制台）
画布是视图端口的大小，而不是整个文档的大小。矩形不会从画布中绘制
这就是为什么我不想创建新元素，而将其放置在现有元素的顶部。它会导致太多问题，根本不起作用

我是否可以在样式中更改/添加一些内容（就像更改背景色一样），以便在元素中存在的所有内容之上使用颜色填充元素

再一次，我不是网站的建设者，我只是为网站创建了一些插件，所以我认为我只能使用javascript，而不能使用css或html。或者如果有办法，请告诉我。
1）用颜色填充元素是通过改变其背景来完成的。我不确定我是否理解你的要求。2） 不要觉得局限于开发人员控制台，您可以在本地驱动器中编写html文档、css文件和js文件，并在浏览器中打开html。