Question

我想要做的是使用类似

之类的东西创建一个菜单

var sheet_nav = document.createElement('style');
sheet_nav.innerHTML = "nav{ margin: 100px auto; text-align: center;}";
document.head.appendChild(sheet_nav);

    var sheet_nav_ul = document.createElement('style');
    sheet_nav.appendChild(sheet_nav_ul);

        var sheet_nav_ul_ul = document.createElement('style');
        sheet_nav_ul_ul.innerHTML = "{display: none;}";
        sheet_nav_ul.appendChild(sheet_nav_ul_ul);

    var sheet_nav_ul_li = document.createElement('style');

这就是我所看到的样式表，直到我最终的结果

nav 
{
    margin: 100px auto; 
    text-align: center;
}


nav ul ul 
{
    display: none;
}


nav ul li:hover > ul 
{
    display: block;
}

我的问题是我如何代表这部分

nav ul li:hover > ul 
    {
        display: block;
    }

使用此，

var sheet_nav_ul_li = document.createElement('style');

Answer 1

以上js会将以下样式添加到标题：

<style>nav{ margin: 100px auto; text-align: center;}<style><style>{display: none;}</style></style></style>

尝试：

var sheet_nav = document.createElement('style');
sheet_nav.innerHTML = "nav{ margin: 100px auto; text-align: center;}";
document.head.appendChild(sheet_nav);

var sheet_nav_ul = document.createTextNode('');
sheet_nav.appendChild(sheet_nav_ul);

var sheet_nav_ul_ul = document.createTextNode('nav ul ul {display: none;}');
sheet_nav.appendChild(sheet_nav_ul_ul);

var sheet_nav_ul_li = document.createTextNode('nav ul li:hover > ul {display:block}');
sheet_nav.appendChild(sheet_nav_ul_li);

Answer 2

你应该使用innerText而不是innerHTML，即：

...
sheet_nav_ul_li.innerText = "nav ul li:hover > ul {display: block;}";
...

如何表示nav ul li：hover＆gt; ul {display：block;在DOM中？

2 个答案: