Переключить значения CSS с помощью Javascript

Question

Я пытаюсь изменить поведение некоторых веб-частей в Sharepoint (таким образом вынуждая IE перерезать мне горло) для наших пользователей, которые используют страницы сервера Project.Я на самом деле не лучший парень из JavaScript, и это сводит меня с ума.

На одной веб-части, отображающей работу из Project, под строкой ввода данных, которая загромождаетПосмотреть.Мы хотим отключить строку «Запланировано».

Я могу сделать это с помощью простого трехслойного лайнера:

<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, чтобы выполнить то, что вы хотите, или вы можете перечислять все элементы на странице, пока не найдете нужный элемент. Есть несколько реализаций с открытым исходным кодом, доступных в Интернете. Однако лучше всего добавить идентификатор в интересующий вас тег, а затем использовать getElementById.

Наконец, Document должно быть document, а JavaScript * с учетом регистра.

Надеюсь, это поможет!

Answer 3

Во-первых, document должно быть строчным в вашей декларации var ObjPlanned. Во-вторых, getElementById возвращает элемент на основе уникального идентификатора, и вы передаете ему элемент или тег name. getElementsByTagName возвращает массив элементов, соответствующих определенному тегу, но вы передаете ему className. В JavaScript нет встроенного getElementsByClassName, но вы легко можете использовать Google, чтобы найти решение.

Answer 4

document.getElementsByTagName ищет элементы на основе имени их HTML-тега, а не атрибута класса. Более новые (не IE) браузеры поддерживают document.getElementsByClassName (), и есть функции с открытым исходным кодом, которые делают то же самое, прибегая к собственным версиям браузера, где они доступны. Эта функция возвращает NodeList, содержащий все элементы, которые используют этот класс, и вы можете получить доступ к каждому элементу и скрыть его через этот список.

Answer 5

Используйте jQuery . Он предоставляет очень полезный метод $. Css () , который очень просто выполняет то, что вы ищете.