Блог

Главная - Вопросы по программированию - Javascript: изменение значения в зависимости от класса HTML-элемента на странице

Javascript: изменение значения в зависимости от класса HTML-элемента на странице

#javascript #html #dom

Вопрос:

<body> Тег на моих страницах имеет 3 возможные комбинации:

 <body>
<body class="label1">
<body class="label2">

Как я могу вывести другое значение для ключа label_names в зависимости от того, какая из этих 3 комбинаций отображается в HTML-файле страницы?

Если это <body class="label1"> так, то оно должно быть напечатано:

 <script type="text/JavaScript">
window.zESettings = {
  webWidget: {
    helpCenter: {
      filter: {
        label_names: 'label1'
      }
    }
  }
};
</script>

Если это <body class="label2"> так, то оно должно быть напечатано:

 <script type="text/JavaScript">
window.zESettings = {
  webWidget: {
    helpCenter: {
      filter: {
        label_names: 'label2'
      }
    }
  }
};
</script>

Если это просто <body> , то он не должен ничего печатать. Я не использую jQuery, поэтому можно использовать только чистый JS. Есть какие-нибудь идеи?

Ответ №1:

Вам нужно будет дождаться загрузки страницы, а затем протестировать classList ее . Если это совпадение, вы можете написать сценарий в условном

 let thelabel
window.addEventListener('load', () => {
  let b = document.querySelector('body');
  if (b.classList.contains('label1')) thelabel = 'label1';
  else if (b.classList.contains('label2')) thelabel = 'label2';
  if (thelabel) {
    window.zESettings = {
      webWidget: {
        helpCenter: {
          filter: {
            label_names: thelabel
          }
        }
      }
    };
  }
})

Ответ №2:

Вы можете проверить document.body.classList , содержит ли определенный класс через DOMTokenList.contains() .

 var l = document.body.classList.contains('label1') ? 'label1' : document.body.classList.contains('label2') ? 'label2' : undefined;
if (l) {
  window.zESettings = {
    webWidget: {
      helpCenter: {
        filter: {
          label_names: l
        }
      }
    }
  };
}
console.log(zESettings.webWidget.helpCenter.filter.label_names); 
 <body class="label1">

В развернутом виде:

 const c = document.body.classList;
var l;
if (c.contains('label1')) {
  l = 'label1';
} else if (c.contains('label2')) {
  l = 'label2';
}
if (l) {
  window.zESettings = {
    webWidget: {
      helpCenter: {
        filter: {
          label_names: l
        }
      }
    }
  };
}
console.log(zESettings.webWidget.helpCenter.filter.label_names); 
 <body class="label1">
Метки: