Изменить поля элемента списка с помощью Javascript - PullRequest
Новая
       44

Изменить поля элемента списка с помощью Javascript

0 голосов
/ 11 октября 2019

Я пытаюсь использовать JavaScript для динамического изменения правого поля для горизонтального списка. Я создал переменную с именем "space", которая равна величине маржи, которую я хочу. Теперь мне нужно сделать правильное поле для каждого элемента списка равным переменной «пробел».

Чтобы быть более точным, у меня возникли проблемы с тем, как ссылаться на элементы списка в моем файле JavaScript. Я могу ссылаться на элементы по классу и идентификатору, используя getElementsByClassName и getElementById соответственно, но мне действительно нужно сослаться на ссылку <a> внутри класса. То есть в css я мог бы вручную изменить поле с помощью: 

.menu-item a {
  margin: 0 50px 0 0;   
}

Обратите внимание, что мне нужна буква "a" в ссылке на селектор css. Как мне получить эту ссылку в Javascript?

Вот немного HTML: 

  <div class="container" id="container">
    <ul>
      <li class="menu-item" id="menuItem"><a href="item0.html">Item 0</a></li>
      <li class="menu-item" id="menuItem"><a href="item1.html">Item 1</a></li>
      <li class="menu-item" id="menuItem"><a href="item2.html">Item 2</a></li>
      <li class="menu-item" id="menuItem"><a href="item3.html">Item 3</a></li>
      <li class="menu-item" id="menuItem"><a href="item4.html">Item 4</a></li>
      <li class="menu-item" id="menuItem"><a href="item5.html">Item 5</a></li>
    </ul>
  </div>

А вот немного CSS: 

.container{
  width:auto;
  margin-left:10%;
  margin-right: 10%;
}

.menu-item a {
  color: #000000;
  font-family: sans-serif;
  font-size: 16px;
  float:left;    
}

А вотнекоторые javascript: 

var space = (document.getElementById("container").offsetWidth - 450)/6;

var menuItem = document.getElementsByClassName("menu-item"); /*this line is the problem*/

spacer();
function spacer () {
  menuItem.style.margin = "0 " + space + "px 0 0"; /*and this line is potentially incorrect as well*/
}

В соответствии с просьбой, я воспользуюсь этой возможностью, чтобы упомянуть, что мне нужно решение, совместимое со всеми браузерами. Спасибо

1 Ответ

1 голос
/ 11 октября 2019

ОК, я верю , что это сработает для вас. У меня нет отличного способа тестирования в IE6 прямо сейчас, но используемый код должен быть совместимым с IE6.

В приведенной ниже демонстрации я создаю функцию с именем updateAnchorMarginsToэто принимает число и устанавливает левое поле всех якорей к переданному числу. Для демонстрации я затем переключаю каждую секунду между установкой левого поля 0 и 20.

(я также удалил все повторяющиеся значения id, так как это недопустимый HTML иобязательно вызовет проблемы).

Сначала мы проверим, определено ли значение document.getElementsByClassName, если нет, то мы можем быть в более старом браузере. Мы заполняем его этим полезным SO-ответом .

Внутри updateAnchorMarginsTo, затем мы можем использовать getElementsByClassName для получения всех li элементов с menu-item class. Мы используем for цикл для итерации по каждому из этих li элементов и используем document.getElementsByTagName (поддерживается в IE6) для извлечения всех a элементов, которые liможет содержать и захватить первый (мы знаем, что будет только один). Наконец, мы обновляем style атрибут каждого из этих anchors, который поддерживается в более старых версиях IE . 

if (!document.getElementsByClassName) {
  // if we are below IE9 we have to polyfill getElementsByClassName...
  // This solution courtesy of:
  // /7747718/getelementsbyclassname-ne-rabotaet-v-staryh-internet-explorer-takih-kak-ie6-ie7-ie8
  document.getElementsByClassName = function(cl) {
    var retnode = [];
    var elem = this.getElementsByTagName('*');
    for (var i = 0; i < elem.length; i++) {
      if((' ' + elem[i].className + ' ').indexOf(' ' + cl + ' ') > -1) retnode.push(elem[i]);
    }
    return retnode;
  }; 
}

function updateAnchorMarginsTo(numPixels) {
  var menuListItems = document.getElementsByClassName("menu-item");
  var currentMenuAnchor, currentMenuListItem;

  for (var i = 0; i < menuListItems.length; i++) {
      currentMenuListItem = menuListItems[i];
      currentMenuAnchor = currentMenuListItem.getElementsByTagName("a")[0];
      currentMenuAnchor.style.marginLeft = numPixels.toString() + 'px';
  }
}

var margins = 0;

setInterval(function () {
  margins = margins === 0 ? 20 : 0;
  updateAnchorMarginsTo(margins);
}, 1000);
<div class="container" id="container">
    <ul>
        <li class="menu-item"><a href="item0.html">Item 0</a></li>
        <li class="menu-item"><a href="item1.html">Item 1</a></li>
        <li class="menu-item"><a href="item2.html">Item 2</a></li>
        <li class="menu-item"><a href="item3.html">Item 3</a></li>
        <li class="menu-item"><a href="item4.html">Item 4</a></li>
        <li class="menu-item"><a href="item5.html">Item 5</a></li>
    </ul>
</div>

Попробуйте - как я сказал, у меня нет настройки инфраструктуры тестирования IE6, поэтому мне интересно посмотреть, работает ли это.

IE6 на данный момент является древним браузером. Если вы должны его поддержать, потребуется некоторое усилие. Если это возможно, может быть целесообразно использовать более старую версию jQuery, чтобы помочь вам. Удачи!

...