使用Javascript创建内部样式表

Creating an Internal Style Sheet With Javascript

本文关键字：内部样式表 创建 Javascript 使用      更新时间：2023-09-26

所以我试图使用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>
  1. CCD_ 1返回一个DOM元素
  2. 如果parseUrl('')返回了一个字符串，那么page = parseUrl('').search将返回字符串方法search，这本身并不是很有用
  3. var site=getSecondPart(page));有一个额外的括号
  4. 未定义text
  5. 像."nav_"4这样的类不是有效的类
  6. 你有一个额外的大括号

所有这些错误都将阻止您的代码运行。Chrome的Web Developer、Firefox的Firebug或JSHint是确保语法错误不会发生的好工具。

一旦完成，就这样做：

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

有两个适当的解决方案，它们不是您所要求的，而是解决您的问题。

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

首选方式：

<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;
}
相关文章：