使用Javascript切换CSS值

Question

我正在尝试为使用Project Server页面的用户修改Sharepoint中某些Web部件的行为（从而迫使IE瘫痪）。 我并不是最适合JavaScript的人，这真让我发疯。

在一个Web部件上，它显示了Project的工作，在实际数据输入行下方显示了一个子行“ 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>

Answer 2

您忘记了功能的开头括号。

您使用的getElementByTagName错误。 此函数获取基于标签名称（a，img等）而非CSS类匹配的元素。 您可以使用jquery完成所需的操作，也可以枚举页面上的每个元素，直到找到所需的元素为止。 可以在线获取一些开源实现。 不过，最好的选择是将一个ID添加到您关心的标签中，然后使用getElementById 。

最后， Document应该是document ，和JavaScript 是区分大小写的。

希望这可以帮助！

Answer 3

document.getElementsByTagName根据其HTML标签的名称而不是其类属性来查找元素。 较新的（不是IE）浏览器支持document.getElementsByClassName（），并且有开放源代码的功能可以完成相同的工作，但可以使用本地版本的浏览器。 此函数将返回一个包含使用该类的所有元素的NodeList，您可以访问每个元素并将其隐藏在该列表中。

Answer 4

首先，在var ObjPlanned声明中， document应小写。 其次， getElementById返回基于唯一ID的元素，然后将其传递给元素或标签名称。 getElementsByTagName返回与特定标签匹配的元素数组，但是您要向其传递className。 JavaScript没有内置“ getElementsByClassName”，但是您可以轻松地使用Google查找解决方案。

Answer 5

使用jQuery 。 它提供了一个非常有用的$ .css（）方法，该方法可以非常简单地完成您要查找的内容。