如何使用js选择器选择'::cue'元素并更改它？我正在尝试创建一个按钮来更改字幕不透明度

Question

这是我的css文件，其中确定了cue。我想创建一个按钮，这样用户可以改变不透明性&当前字幕音轨的字体大小。

<style>
::cue {
font-size: 20px;
font-family: Georgia, serif;
color: blue;
background-position: right;
opacity: 1;
}
</style>

Answer 1

任何JS都不能选择伪元素，但有一个实际可行的(绝对不是很好的(解决方案：

<script>
var head = document.head || document.getElementsByTagName('head')[0],
style = document.createElement('style');
head.appendChild(style);

// call the below function in your event handler, 
// and pass the 'style' object to it, and the required opacity:
// example: by clicking a button the opacity will be set to 0.6
const button = document.querySelector('button');
button.addEventListener("click", function(){ 
doFormatting(style, 0.6)
});

function doFormatting(objStyle, opacity){
if (objStyle.styleSheet){
// maybe unnecessary, but this is required for IE8 and below.
objStyle.styleSheet.cssText = "::cue{opacity:"+opacity+"}";
} else {
objStyle.innerHTML = "::cue{opacity:"+opacity+"}"
}
}
</script>