如何用只有javascript的颜色填充元素？ （不改变背景颜色，但在整个元素的顶部填充颜色）

Question

我对编码很陌生，我被迫在学校做一个编码项目，我感到绝望。

这是我得到的一段代码：

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";
}

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

但这不是我想要的。

我希望在通道名称之上填充颜色。所以你应该只看到蓝色矩形而不是通道名称。

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

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

有什么建议吗？感谢。

Answer 1

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 */
}

尝试更改文字颜色。

Answer 2

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

＆＃13;

＆＃13;

window.addEventListener("DOMContentLoaded", () => {
const element = [document.getElementById("youtuber-name-box"),
                 document.getElementById("youtuber-name")];
                 /* Accessing to this styles */
element[0].style.backgroundColor = "blue"; // Bg color
var padding = 1;
function r(){
if(padding < 80) {padding += 1; element[0].setAttribute("style","padding:"+padding+"px");
setTimeout(()=>{r();},50);
}
if(padding === 79){ // last
  element[1].style.fontSize = "35px";
  element[1].style.fontFamily = "monospace";
  element[1].style.color = "black";
}
}
r();

});

＆＃13;

#youtuber-name-box {
background-color: gray; display:table; padding: 10px;
}

＆＃13;

<div id="youtuber-name-box">

<i id="youtuber-name">Meth</i>

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

年轻的Kyun Jin的回答是最接近我想要的，通过将文字颜色改为透明。

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

I made a picture to explain better. I want the to add color on top of an existing element, which I can add text on the color and, if possible, change the opacity of the color so I can still see what is under it. 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();
}    

但是由此创建的矩形不太正确。

1. 它并不完全放在元素之上。它只是用画布滚动。因此，即使滚动时元素不移动，矩形仍会滚动。
2. 由于某种原因，矩形未正确放置在第一位。 （我使用的是Chrome开发者控制台）
3. 画布是视口的大小，但不是整个文档的大小。矩形不会从画布中拉出。

这就是为什么我不想创建新元素和位置在现有元素之上。它会导致太多问题，只是不起作用。

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

再次，我不是网站的建设者，我只是在网站上创建某种插件，所以我认为我只能使用javascript但不能使用css或html。或者，如果有办法，请告诉我。