javascript - 关于 css 中显示属性更改的 Chrome I JavaScript 问题-6ren

javascript - 关于 css 中显示属性更改的 Chrome I JavaScript 问题

转载作者：行者123 更新时间：2023-11-30 18:26:20

我一直在使用一些 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/