我一直在使用一些 JavaScript 来更改我网站的显示属性。它适用于 Firefox 和 IE，但 Chrome 和 Safari 根本没有响应。我正在尝试将显示从“无”更改为“阻止”，或相反。这是代码:
function setStyleClass (classesOff,classesOn) {
var classOn;
if (document.all) {
for (var s = 0; s < document.styleSheets.length; s++) {
for (var r = 0; r < document.styleSheets[s].rules.length; r++){
if (document.styleSheets[s].rules[r].selectorText.indexOf(classesOff,0) > -1) {
document.styleSheets[s].rules[r].style.display = "none";
}
for(var j = 0; j < classesOn.length; j++){
classOn = classesOn[j];
if (document.styleSheets[s].rules[r].selectorText == '.' + classOn) {
document.styleSheets[s].rules[r].style.display = "block";
}
}
}
}
}
else if (document.getElementById) {
for (var s = 0; s < document.styleSheets.length; s++) {
for (var r = 0; r < document.styleSheets[s].cssRules.length; r++) {
if (document.styleSheets[s].cssRules[r].selectorText.indexOf(classesOff,0) > -1) {
document.styleSheets[s].cssRules[r].style.display = "none";
}
for(var j = 0; j < classesOn.length; j++){
classOn = classesOn[j];
if (document.styleSheets[s].cssRules[r].selectorText == '.' + classOn) {
document.styleSheets[s].cssRules[r].style.display = "block";
}
}
}
}
}
}
当它被调用时，它会得到一个列表，其中包含要关闭的样式 ID 和要“打开”的样式。 这是调用:
onClick="setStyleClass('book','book2_nl','book3_nl','book4_nl','B1_List_01_20','B1_Link_21_40']);
其工作方式是“关闭”名称中带有“book”的所有样式，以及 book2_nl、book3_nl 和 book4_nl。最后两种样式被“打开”。所以我用另一个不同的列表替换了一个“页面链接列表”。上面的代码在 IE 和 FF 中运行良好，但在 Chrome 和 Safari 中我看不到任何效果。 进来的样式都是这样的:
.B4_Link_21_40 {
display: none;
color: #f8fb24;
font : 90% Book Antiqua;
}
.B4_List_21_40 {
display: none;
color: #f8fb24;
font : 90% Book Antiqua;
}
我希望在单击相应链接时启用这些样式。我的代码中是否存在任何可能导致此问题的明显错误？
好的，你已经看到了上面的问题，现在我已经想出了如何返回并为你的利益添加 html :)
<html>
<head></head>
<title></title>
<script> //the script posted above </script>
<style>
.book1 {
position: absolute;
left:0px;
top:410px;
width:200px;
height:40px;
display: block;
}
.book2 {
position:absolute;
left:0px;
top:450px;
width:200px;
height:40px;
}
.B1_Link_01_20 {
display: none;
color: #f8fb24;
font : 90% Book Antiqua;
}
.B1_List_01_20 {
display: block;
color: #f8fb24;
font : 90% Book Antiqua;
}
.B1_Link_21_40 {
display: block;
color: #f8fb24;
font : 90% Book Antiqua;
}
.B1_List_21_40 {
display: none;
color: #f8fb24;
font : 90% Book Antiqua;
}
</style>
<div align="justify" align="center" class="mainBody"
<p>Here's some content...</p>
</div>
<div class="book1">
<a href="#" target="_self"
onClick="setStyleClass('book',['B1_List_01_20','B1_Link_21_40']);
switchStyleClass('B2_Li');
onMouseOut="window.status=''; return true;">
</a>
</div>
<div class="book2">
<a href="#" target="_self"
onClick="setStyleClass('book',['B2_List_01_20','B2_Link_21_40']);
switchStyleClass('B1_Li');
onMouseOut="window.status=''; return true;">
</a>
</div>
<div class="B1_List_01_20">
<a href=Link To Page 1.shtml>1. Link To Page 1</a><br>
<a href=Link To Page 2.shtml>2. Link To Page 2</a><br>
<br></div>
<div class="B1_List_21_40">
<a href=Link To Page 21.shtml>21. Link To Page 21</a><br>
<a href=Link To Page 22.shtml>22. Link To Page 22</a><br>
<br></div>
<div class="B1_Link_01_20">
<a ONCLICK="setStyleClass('B1_Li',['B1_List_01_20','B1_Link_21_40']);" href="#">List of Links 1 - 20</a><br><br>
</div>
<div class="B1_Link_21_40">
<a ONCLICK="setStyleClass('B1_Li',['B1_List_21_40','B1_Link_01_20','B1_Link_41_60']);" href="#">List of Links 21 - 40</a><br><br>
</div>
</html>
最佳答案
首先，如果您只是想更改链接，那么我会通过 position: absolute 将不同的链接放在位于同一位置的 2 个容器中，然后我会有一个默认样式 none。单击按钮时，您甚至不必将任何内容传递给您的方法，因为您只处理 2 个容器并且您知道它们的 ID。
然后不用遍历样式表，只需使用 document.getElementById('container_1').style.display = 'block';
document.getElementById('container_2').style.display = 'none';
只要您的容器是 block 级别的，例如 div，那么这将更改它们在每个浏览器中的显示属性。
如果你想通过改变他们的类名来做到这一点，那么你可以这样做。
function changeStyles(){
document.getElementById('container_1').className = 'classOn';
document.getElementById('container_2').className = 'classOff';
//rest of your javascript
}
*这仍然假设您使用两个容器而不是尝试更改每个链接的单独样式
编辑:
因此，不知道您实际拥有的 html 会使回答您的评论变得更加困难，但请继续。
您的 html 可能看起来像这样:
<div class='classOn' id='container_1'>
<a href='some_link'>some link</a>
<a href='some_link2'>some link2</a>
<a href='some_link3'>some link3</a>
<a href='some_link4'>some link4</a>
</div>
<div class='classOff' id='container_2'>
<a href='different_link'>different link</a>
<a href='different_link2'>different link2</a>
<a href='different_link3'>different link3</a>
<a href='different_link4'>different link4</a>
</div>
<button onclick='changeStyles()>See new Links!</button>
然后你的CSS:
.classOn{
display: block;
position:absolute;
margin: 10px 10px 10px 10px;
//rest of your css
}
.classOff{
display: none;
position: absolute;
margin: 10px 10px 10px 10px;
//rest of your css
}
注意这两个类如何具有完全相同的边距，因为绝对位置属性，它们可以有这个。它有效地占用了他们将使用的页面空间。现在，当通过按下按钮调用函数 changeStyles() 时，第一个 div 被隐藏，第二个 div 显示在完全相同的位置的新链接。希望有所帮助。
好的，所以我上面的例子可以很好地处理你刚刚制作的 class='classOn' 你的 class='B1_List_01_20' 和 class='classOff ' 你的 class='B1_Link_21_40' 并使用上面的函数，它应该可以在它们之间切换。
关于javascript - 关于 css 中显示属性更改的 Chrome I JavaScript 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10694769/