Question

所以我正在尝试使用javascript在标题中创建一个内部样式表，但它不起作用。这个脚本的这一点是为了突出显示我所在页面的选项卡。

下面不是我正在实施它的实际网站，只是测试 - 但它无法正常工作。这甚至可能吗？是的，我知道我可以使用内联css或其他东西，但这将是更令人困惑的！

<html>
<head>
<title>Test</title>
<script type="text/javascript">
function parseUrl( url ) {
    var a = document.createElement('a');
    a.href = url;
    return a;
}

var page=parseUrl('').search

function getSecondPart(str) {
    return str.split('=')[1];
}

var site=getSecondPart(page));

text.innerHTML('<style type="text/css">
."nav_"' + page + '" {background-color:red;} {color=green;} </style>')

}
</style>"

</script>
</head>
<body>
<ul>
<li class="nav_home"><a href="testtest.html?site=home">Home</a>
<li class="nav_forum"><a href="testtest.html?site=forum"/>Forum</a>
<li class="nav_help"><a href="testtest.html?site=help"/>Help</a>
<li class="nav_roster"><a href="testtest.html?site=roster"/>Roster<a/>
</body>
</html>

Answer 1

parseURL返回一个DOM元素。
page = parseUrl('').search，如果parseUrl('')返回一个字符串，则会返回字符串方法search，这本身并不是很有用。
var site=getSecondPart(page));有一个额外的括号。
text未定义。
像."nav_"4这样的类不是有效的类。
你有一个额外的大括号。

所有这些错误都会阻止您的代码运行。用于确保不会出现语法错误的好工具是Chrome的Web开发人员，Firefox的Firebug或JSHint。

完成后，请执行以下操作：

var style = document.createElement("style");
style.innerHTML = ".nav_" + page + " { background-color: red; color: green; }";
document.body.appendChild(style);

Answer 2

有两个正确的解决方案，这不是您要求的解决问题的方法。

第一种方法是在每个li中使用不同的导航类。这就是你应该一直在做的事情。

首选方式：

<li class="nav" id="home"> ...

您也可以这样做，但这不是一个好主意，因为主页li是唯一的。

<li class="nav nav-home"> ...

与

li.nav {
    background-color: red;
    color: green;
}

第二种方法是使用CSS3属性选择器。但是，这可能不适用于所有浏览器：

li[class^="nav"] {
    background-color: red;
    color: green;
}

使用Javascript创建内部样式表

2 个答案: