使用Javascript切换CSS值

Question

我正在尝试为使用Project服务器页面的用户修改Sharepoint中的某些Web部件的行为(从而迫使IE进入我的喉咙).我不是最好的JavaScript家伙,这让我疯狂.

在一个显示Project中工作的webpart上,实际数据输入行下方显示了一个子程序"Planned",它使视图变得混乱.我们希望关闭"计划"行.

我可以用这样一个简单的三个衬里来做到这一点:

<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>