Chrome I JavaScript 关于更改 CSS 中的显示属性的问题

Chrome I JavaScript issue regarding change of display properties in css

本文关键字：显示 属性 问题 CSS JavaScript 于更改 Chrome      更新时间：2023-09-26

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

只要您的容器是块级别，例如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'并使用上面的功能，它应该在它们之间切换就好了。

相关文章：