javascript - 使用 Javascript 切换 CSS 值

Question

我正在尝试为使用 Project 服务器页面的用户修改 Sharepoint 中某些 Web 部件的行为(因此迫使我放弃 IE)。我真的不是最好的 JavaScript 专家，这让我抓狂。

在一个用于显示 Project 工作的 Web 部件上，实际数据输入行下方显示了一个子行“已计划”，使 View 变得困惑。我们想关闭“计划”行。

我可以用这样一个简单的三层衬垫来完成:

<style type="text/css">
   .XmlGridPlannedWork {display:none;}
</style>

但是用户想要打开和关闭线路。 所以我想我会尝试像这样读取然后写入当前的 CSS 值:

<script type="text/javascript">

function toggle_PlannedLine()
var ObjPlanned = Document.getElementById("tr").getElementsByTagName("XmlGridPlannedWork");

for(var i=0;i<ObjPlanned.length;i++)
{
    if (OjbPlanned[i].display != "none")
    {
        // toggle the 'Planned' line off
        ObjPlanned[i].style.display = "none";
    }
    else
    {
        // toggle the 'Planned' line on
        ObjPlanned[i].style.display = "inline";
    }
}

return;
}

</script>

<button onClick="toggle_PlannedLine();">Toggle Planned Line</button>

我定位的实际分割市场如下所示:

<tr class="XmlGridPlannedWork" RowID="694810f9-e922-4321-9236-e495dd5048d9B" ID="GridDataRow">

当然，当您单击按钮时，行不会消失。 在这一点上，我很确定我遗漏了一些明显的东西，但就像我提到的，我不是 JavaScript 大师。

Answer 1

最简单的解决方案

好的，所以我在下面的回答应该能帮到您，但这是另一种更简单的方法:

CSS

<style type="text/css">
   .XmlGridPlannedWork {display:none;}
   body.showPlanned .XmlGridPlannedWork { display: block}
</style>

HTML/JavaScript

<script type="text/javascript">
function toggle_PlannedLine() {
    if(document.body.className.match(/\bshowPlanned\b/) > -1)
        document.body.className = document.body.className.replace(/\bshowPlanned\b/,'');
    else
        document.body.className += " showPlanned";
}
</script>

<button onClick="toggle_PlannedLine();">Toggle Planned Line</button>

原始答案

您非常接近您想要的概念，但正如其他答案所指出的那样，还缺少一些东西。我重写了你的函数以跨浏览器工作，如果你有任何问题请询问:

<script type="text/javascript">

function toggle_PlannedLine() {
  var objs = [];

  if( document.querySelector){
     objs = document.querySelectorAll('tr.XmlGridPlannedWork');
  } else if (document.getElementsByClassName) {
     objs = document.getElementsByClassName('XmlGridPlannedWork');
  } else {
     var temp = document.getElementsByTagName('tr');
     for(var j = 0; j < temp.length; j++){
       if(temp[j].className.match(/\bXmlGridPlannedWork\b/) > -1){
         objs.push(temp[j]);
       }
     }
  }

  for(var i=0;i<objs.length;i++)
  {
      if (objs[i].style.display != "none")
      {
          // toggle the 'Planned' line off
          objs[i].style.display = "none";
      }
      else
      {
          // toggle the 'Planned' line on
          objs[i].style.display = "inline";
      }
  }
}

</script>

<button onClick="toggle_PlannedLine();">Toggle Planned Line</button>

对于那些争论 jQuery 不是有效答案的人，请以下面的代码为例来说明为什么 jQuery 如此易于使用。前面所有的代码总结如下:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
  $(function(){
    $('button.toggle').click(function(){
      $("tr.XmlGridPlannedWork").toggle();
    })
  })
</script>

<button class="toggle">Toggle Planned Line</button>