使用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（）方法，該方法可以非常簡單地完成您要查找的內容。