添加样式

function addStyle(){
    const styles = `
    .video-container {
        width: 800px !important; /* 示例样式 */
        background-color: lightblue; /* 示例样式 */
    }
    #playBtn {
        position:fixed;
        width:300px;
        height:130px;
        border-radius:10px;
        background:pink;
        right:200px;
        top:200px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 88px;
        z-index: 99;
        cursor: pointer;
    }
    .subtitle-view{
        padding-top:40px;
        scroll-margin-top: 20px;
    }
    `

    const styleSheet = document.createElement("style")
    styleSheet.textContent = styles
    document.head.appendChild(styleSheet)
}

创建元素

function createElement(id, parent = document.body) {
    // 创建一个新的 div 元素
    const newElement = document.createElement('div');

    // 设置新元素的 id
    newElement.id = id;

    // 将新元素附加到指定的父元素中
    parent.appendChild(newElement);

    // 返回创建的元素，以便后续操作
    return newElement;
}

添加按钮元素

function addElementsList(list,container) {

    // 遍历列表中的每个对象
    list.forEach(item => {
        // 创建一个新的 <a> 元素
        const linkElement = document.createElement('a');

        // 设置 <a> 元素的 href 属性
        linkElement.href = item.href;

        // 设置 <a> 元素的文本内容
        linkElement.textContent = item.title;

        // 将 <a> 元素添加到容器中
        container.appendChild(linkElement);

    });
}

const list = [
    { title: 'Google', href: '<https://www.google.com>' },
    { title: 'GitHub', href: '<https://www.github.com>' },
    { title: 'Stack Overflow', href: '<https://stackoverflow.com>' }
];