0

Есть меню которое формируется конструктором tilda.cc, мне необходимо изменить в этом меню некоторые пункты. Каждый элемент меню имеет свой атрибут - data-menu-item-number.

Как мне используя javaScript изменять стили (цвет, начертание) отдельных пунктов?

Пробовал:

document.getElementsByTagName('data-menu-item-number')
document.getElementsByName('data-menu-item-number')

без результата. Возможно я не правильно использую синтаксис.

document.addEventListener('DOMContentLoaded', function() {
  //documennt.someFunction ? ? ? ? ?
});
<div class="t450__container t-align_left" style="height: auto;">
  <div class="t450__top">
    <div class="t450__menu">
      <ul class="t450__list">
        <li class="t450__list_item"><a class="t-menu__link-item " href="" style="color:#000000;font-size:12px;font-weight:500;font-family:'HelveticaNowDisplay';margin-bottom:10px;" data-menu-item-number="1">ABOUT</a> </li>
        <li class="t450__list_item"><a class="t-menu__link-item " href="" style="color:#000000;font-size:12px;font-weight:500;font-family:'HelveticaNowDisplay';margin-bottom:10px;" data-menu-item-number="2">WORKS</a> </li>
        <li class="t450__list_item"><a class="t-menu__link-item " href="" style="color:#000000;font-size:12px;font-weight:500;font-family:'HelveticaNowDisplay';margin-bottom:10px;" data-menu-item-number="3"> - All</a> </li>
        <li class="t450__list_item"><a class="t-menu__link-item " href="" style="color:#000000;font-size:12px;font-weight:500;font-family:'HelveticaNowDisplay';margin-bottom:10px;" data-menu-item-number="4"> - City art</a> </li>
        <li class="t450__list_item"><a class="t-menu__link-item " href="" style="color:#000000;font-size:12px;font-weight:500;font-family:'HelveticaNowDisplay';margin-bottom:10px;" data-menu-item-number="5"> - Dwelling</a> </li>
        <li class="t450__list_item"><a class="t-menu__link-item " href="" style="color:#000000;font-size:12px;font-weight:500;font-family:'HelveticaNowDisplay';margin-bottom:10px;" data-menu-item-number="6">WORKFLOW</a> </li>
        <li class="t450__list_item"><a class="t-menu__link-item " href="" style="color:#000000;font-size:12px;font-weight:500;font-family:'HelveticaNowDisplay';margin-bottom:10px;" data-menu-item-number="7">DETAILS</a> </li>
        <li class="t450__list_item"><a class="t-menu__link-item " href="" style="color:#000000;font-size:12px;font-weight:500;font-family:'HelveticaNowDisplay';margin-bottom:10px;" data-menu-item-number="8">AWARDS &amp; CLIENTS</a> </li>
        <li class="t450__list_item"><a class="t-menu__link-item " href="" style="color:#000000;font-size:12px;font-weight:500;font-family:'HelveticaNowDisplay';margin-bottom:10px;" data-menu-item-number="9">CONTACT US</a> </li>
        <li class="t450__list_item"><a class="t-menu__link-item " href="" style="color:#000000;font-size:12px;font-weight:500;font-family:'HelveticaNowDisplay';margin-bottom:10px;" data-menu-item-number="10">FOLLOW US</a> </li>
        <li class="t450__list_item"><a class="t-menu__link-item " href="" style="color:#000000;font-size:12px;font-weight:500;font-family:'HelveticaNowDisplay';margin-bottom:10px;" data-menu-item-number="11">SOMETHING</a> </li>
        <li class="t450__list_item"><a class="t-menu__link-item " href="" style="color:#000000;font-size:12px;font-weight:500;font-family:'HelveticaNowDisplay';margin-bottom:10px;" data-menu-item-number="12">SOMETHING</a> </li>
        <li class="t450__list_item"><a class="t-menu__link-item " href="" style="color:#000000;font-size:12px;font-weight:500;font-family:'HelveticaNowDisplay';margin-bottom:10px;" data-menu-item-number="13">SOMETHING</a> </li>
        <li class="t450__list_item"><a class="t-menu__link-item " href="" style="color:#000000;font-size:12px;font-weight:500;font-family:'HelveticaNowDisplay';margin-bottom:10px;" data-menu-item-number="14">SOMETHING</a> </li>
        <li class="t450__list_item"><a class="t-menu__link-item " href="" style="color:#000000;font-size:12px;font-weight:500;font-family:'HelveticaNowDisplay';margin-bottom:10px;" data-menu-item-number="15">SOMETHING</a> </li>
        <li class="t450__list_item"><a class="t-menu__link-item " href="" style="color:#000000;font-size:12px;font-weight:500;font-family:'HelveticaNowDisplay';margin-bottom:10px;" data-menu-item-number="16">SOMETHING</a> </li>
        <li class="t450__list_item"><a class="t-menu__link-item " href="" style="color:#000000;font-size:12px;font-weight:500;font-family:'HelveticaNowDisplay';margin-bottom:10px;" data-menu-item-number="17">SOMETHING</a> </li>
        <li class="t450__list_item"><a class="t-menu__link-item " href="" style="color:#000000;font-size:12px;font-weight:500;font-family:'HelveticaNowDisplay';margin-bottom:10px;" data-menu-item-number="18">SOMETHING</a> </li>
      </ul>
    </div>
  </div>
  <div class="t450__rightside">
    <div class="t450__rightcontainer">
      <div class="t450__right_descr t-descr t-descr_xs" field="descr" style="font-family:'HelveticaNowDisplay';">I am ready for a long road flight for working with a week- or months-long projects.</div>
    </div>
  </div>
</div>

Заранее благодарен за любую помощь.

4
  • GetElementByTagName задается с названием тега - "div", "span", "li". GetElementByName и GetElementByTagName возвращает массив, по-этому для доступа к отдельному DOM надо перебирать этот массив. Чтобы напрямую обратится к DOM, ему нужно добавить уникальный id, и далее обращаться getElementById
    – Wolframm
    21 окт 2019 в 6:59
  • @Никита Насколько я понимаю, - data-menu-item-number="1" эта строка и есть этот уникальный id. Вопрос только как к нему обратиться? Или я ошибаюсь?
    – Andrew Gor
    21 окт 2019 в 8:50
  • Айди указывается так: id="some_id". Обращайтесь по классу, не прогадаете
    – Wolframm
    21 окт 2019 в 9:29
  • У меня нет доступа к тому html-коду который я выложил. Я могу только использовать дополнительный html/css/js. Поэтому я ищу способ обратиться к этому html-коду и изменить для него некоторые стили.
    – Andrew Gor
    21 окт 2019 в 9:49

4 ответа 4

1

Здесь js не нужен. Достаточно css Обрати внимание - при необходимости добавляй в правило !important. Часть стилей тильда кидает в атрибут style

.t450__list_item a[data-menu-item-number="3"] {
color: green !important;
}


.t450__list_item a[data-menu-item-number="5"] {
color: blue !important;
}

.t450__list_item a[data-menu-item-number="7"] {
color: red  !important;
}
<div class="t450__container t-align_left" style="height: auto;">
  <div class="t450__top">
    <div class="t450__menu">
      <ul class="t450__list">
        <li class="t450__list_item"><a class="t-menu__link-item " href="" style="color:#000000;font-size:12px;font-weight:500;font-family:'HelveticaNowDisplay';margin-bottom:10px;" data-menu-item-number="1">ABOUT</a> </li>
        <li class="t450__list_item"><a class="t-menu__link-item " href="" style="color:#000000;font-size:12px;font-weight:500;font-family:'HelveticaNowDisplay';margin-bottom:10px;" data-menu-item-number="2">WORKS</a> </li>
        <li class="t450__list_item"><a class="t-menu__link-item " href="" style="color:#000000;font-size:12px;font-weight:500;font-family:'HelveticaNowDisplay';margin-bottom:10px;" data-menu-item-number="3"> - All</a> </li>
        <li class="t450__list_item"><a class="t-menu__link-item " href="" style="color:#000000;font-size:12px;font-weight:500;font-family:'HelveticaNowDisplay';margin-bottom:10px;" data-menu-item-number="4"> - City art</a> </li>
        <li class="t450__list_item"><a class="t-menu__link-item " href="" style="color:#000000;font-size:12px;font-weight:500;font-family:'HelveticaNowDisplay';margin-bottom:10px;" data-menu-item-number="5"> - Dwelling</a> </li>
        <li class="t450__list_item"><a class="t-menu__link-item " href="" style="color:#000000;font-size:12px;font-weight:500;font-family:'HelveticaNowDisplay';margin-bottom:10px;" data-menu-item-number="6">WORKFLOW</a> </li>
        <li class="t450__list_item"><a class="t-menu__link-item " href="" style="color:#000000;font-size:12px;font-weight:500;font-family:'HelveticaNowDisplay';margin-bottom:10px;" data-menu-item-number="7">DETAILS</a> </li>
        <li class="t450__list_item"><a class="t-menu__link-item " href="" style="color:#000000;font-size:12px;font-weight:500;font-family:'HelveticaNowDisplay';margin-bottom:10px;" data-menu-item-number="8">AWARDS &amp; CLIENTS</a> </li>
        <li class="t450__list_item"><a class="t-menu__link-item " href="" style="color:#000000;font-size:12px;font-weight:500;font-family:'HelveticaNowDisplay';margin-bottom:10px;" data-menu-item-number="9">CONTACT US</a> </li>
        <li class="t450__list_item"><a class="t-menu__link-item " href="" style="color:#000000;font-size:12px;font-weight:500;font-family:'HelveticaNowDisplay';margin-bottom:10px;" data-menu-item-number="10">FOLLOW US</a> </li>
        <li class="t450__list_item"><a class="t-menu__link-item " href="" style="color:#000000;font-size:12px;font-weight:500;font-family:'HelveticaNowDisplay';margin-bottom:10px;" data-menu-item-number="11">SOMETHING</a> </li>
        <li class="t450__list_item"><a class="t-menu__link-item " href="" style="color:#000000;font-size:12px;font-weight:500;font-family:'HelveticaNowDisplay';margin-bottom:10px;" data-menu-item-number="12">SOMETHING</a> </li>
        <li class="t450__list_item"><a class="t-menu__link-item " href="" style="color:#000000;font-size:12px;font-weight:500;font-family:'HelveticaNowDisplay';margin-bottom:10px;" data-menu-item-number="13">SOMETHING</a> </li>
        <li class="t450__list_item"><a class="t-menu__link-item " href="" style="color:#000000;font-size:12px;font-weight:500;font-family:'HelveticaNowDisplay';margin-bottom:10px;" data-menu-item-number="14">SOMETHING</a> </li>
        <li class="t450__list_item"><a class="t-menu__link-item " href="" style="color:#000000;font-size:12px;font-weight:500;font-family:'HelveticaNowDisplay';margin-bottom:10px;" data-menu-item-number="15">SOMETHING</a> </li>
        <li class="t450__list_item"><a class="t-menu__link-item " href="" style="color:#000000;font-size:12px;font-weight:500;font-family:'HelveticaNowDisplay';margin-bottom:10px;" data-menu-item-number="16">SOMETHING</a> </li>
        <li class="t450__list_item"><a class="t-menu__link-item " href="" style="color:#000000;font-size:12px;font-weight:500;font-family:'HelveticaNowDisplay';margin-bottom:10px;" data-menu-item-number="17">SOMETHING</a> </li>
        <li class="t450__list_item"><a class="t-menu__link-item " href="" style="color:#000000;font-size:12px;font-weight:500;font-family:'HelveticaNowDisplay';margin-bottom:10px;" data-menu-item-number="18">SOMETHING</a> </li>
      </ul>
    </div>
  </div>
  <div class="t450__rightside">
    <div class="t450__rightcontainer">
      <div class="t450__right_descr t-descr t-descr_xs" field="descr" style="font-family:'HelveticaNowDisplay';">I am ready for a long road flight for working with a week- or months-long projects.</div>
    </div>
  </div>
</div>

1
var doms = document.getElementsByClassName("t-menu__link-item");
     for(var x=0; x<doms.length; x++) {
          if(doms[x].innerHTML == "ABOUT") { 
               doms[x].style.backgroundColor = "red";
               doms[x].addEventListener("click", function() {
                  this.style.backgroundColor = "red";
               });
          }
     }

Все остальные свойства в таком же ключе. Можно еще так:

document.getElementsByClassName("t-menu__link-item");
     for(var x=0; x<doms.length; x++) { 
         doms[x].setAttribute("id", x);
     }

Далее обращаетесь уже по айди:

var dom = document.getElementById("0");
    dom.style.backgroundColor = "red";

Успехов.

2
  • Классный способ, спасибо. Только он в цикле перебирает все элементы, а мне необходимо менять стиль не ко всем элементам, а выборочно только к нескольким пунктам.
    – Andrew Gor
    21 окт 2019 в 10:42
  • Подкорректировал
    – Wolframm
    21 окт 2019 в 10:55
0

Можно так используя ES6:

[...document.getElementsByClassName("t-menu__link-item")].forEach( item => {
	item.style.backgroundColor = "red";
	item.addEventListener("click", (e) => {
  e.currentTarget.style.backgroundColor = "green"
 })
})
<div class="t450__container t-align_left" style="height: auto;"> 
	<div class="t450__top"> 
		<div class="t450__menu"> 
			<ul class="t450__list"> 
				<li class="t450__list_item"><a class="t-menu__link-item " href="" style="color:#000000;font-size:12px;font-weight:500;font-family:'HelveticaNowDisplay';margin-bottom:10px;" data-menu-item-number="1">ABOUT</a> </li> 
				<li class="t450__list_item"><a class="t-menu__link-item " href="" style="color:#000000;font-size:12px;font-weight:500;font-family:'HelveticaNowDisplay';margin-bottom:10px;" data-menu-item-number="2">WORKS</a> </li> 
				<li class="t450__list_item"><a class="t-menu__link-item " href="" style="color:#000000;font-size:12px;font-weight:500;font-family:'HelveticaNowDisplay';margin-bottom:10px;" data-menu-item-number="3"> - All</a> </li> 
				<li class="t450__list_item"><a class="t-menu__link-item " href="" style="color:#000000;font-size:12px;font-weight:500;font-family:'HelveticaNowDisplay';margin-bottom:10px;" data-menu-item-number="4"> - City art</a> </li> 
				<li class="t450__list_item"><a class="t-menu__link-item " href="" style="color:#000000;font-size:12px;font-weight:500;font-family:'HelveticaNowDisplay';margin-bottom:10px;" data-menu-item-number="5"> - Dwelling</a> </li> 
				<li class="t450__list_item"><a class="t-menu__link-item " href="" style="color:#000000;font-size:12px;font-weight:500;font-family:'HelveticaNowDisplay';margin-bottom:10px;" data-menu-item-number="6">WORKFLOW</a> </li> 
				<li class="t450__list_item"><a class="t-menu__link-item " href="" style="color:#000000;font-size:12px;font-weight:500;font-family:'HelveticaNowDisplay';margin-bottom:10px;" data-menu-item-number="7">DETAILS</a> </li> 
				<li class="t450__list_item"><a class="t-menu__link-item " href="" style="color:#000000;font-size:12px;font-weight:500;font-family:'HelveticaNowDisplay';margin-bottom:10px;" data-menu-item-number="8">AWARDS &amp; CLIENTS</a> </li> 
				<li class="t450__list_item"><a class="t-menu__link-item " href="" style="color:#000000;font-size:12px;font-weight:500;font-family:'HelveticaNowDisplay';margin-bottom:10px;" data-menu-item-number="9">CONTACT US</a> </li> 
				<li class="t450__list_item"><a class="t-menu__link-item " href="" style="color:#000000;font-size:12px;font-weight:500;font-family:'HelveticaNowDisplay';margin-bottom:10px;" data-menu-item-number="10">FOLLOW US</a> </li> 
				<li class="t450__list_item"><a class="t-menu__link-item " href="" style="color:#000000;font-size:12px;font-weight:500;font-family:'HelveticaNowDisplay';margin-bottom:10px;" data-menu-item-number="11">SOMETHING</a> </li> 
				<li class="t450__list_item"><a class="t-menu__link-item " href="" style="color:#000000;font-size:12px;font-weight:500;font-family:'HelveticaNowDisplay';margin-bottom:10px;" data-menu-item-number="12">SOMETHING</a> </li> 
				<li class="t450__list_item"><a class="t-menu__link-item " href="" style="color:#000000;font-size:12px;font-weight:500;font-family:'HelveticaNowDisplay';margin-bottom:10px;" data-menu-item-number="13">SOMETHING</a> </li> 
				<li class="t450__list_item"><a class="t-menu__link-item " href="" style="color:#000000;font-size:12px;font-weight:500;font-family:'HelveticaNowDisplay';margin-bottom:10px;" data-menu-item-number="14">SOMETHING</a> </li> 
				<li class="t450__list_item"><a class="t-menu__link-item " href="" style="color:#000000;font-size:12px;font-weight:500;font-family:'HelveticaNowDisplay';margin-bottom:10px;" data-menu-item-number="15">SOMETHING</a> </li> 
				<li class="t450__list_item"><a class="t-menu__link-item " href="" style="color:#000000;font-size:12px;font-weight:500;font-family:'HelveticaNowDisplay';margin-bottom:10px;" data-menu-item-number="16">SOMETHING</a> </li> 
				<li class="t450__list_item"><a class="t-menu__link-item " href="" style="color:#000000;font-size:12px;font-weight:500;font-family:'HelveticaNowDisplay';margin-bottom:10px;" data-menu-item-number="17">SOMETHING</a> </li> 
				<li class="t450__list_item"><a class="t-menu__link-item " href="" style="color:#000000;font-size:12px;font-weight:500;font-family:'HelveticaNowDisplay';margin-bottom:10px;" data-menu-item-number="18">SOMETHING</a> </li> 
			</ul> 
		</div> 
	</div> 
	<div class="t450__rightside"> 
		<div class="t450__rightcontainer"> 
			<div class="t450__right_descr t-descr t-descr_xs" field="descr" style="font-family:'HelveticaNowDisplay';">I am ready for a long road flight for working with a week- or months-long projects.</div> 
		</div> 
	</div> 
</div>

1
  • Классный способ, спасибо. Только он в цикле перебирает все элементы, а мне необходимо менять стиль не ко всем элементам, а выборочно только к нескольким пунктам.
    – Andrew Gor
    21 окт 2019 в 10:42
0

Jquery:

$('.t-menu__link-item').each(function(index,item){
    if(parseInt($(item).data('menu-item-number')) == 6) { //применить стиль для 6го пункта меню
        $(item).css("color", "red");
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="t450__container t-align_left" style="height: auto;">
  <div class="t450__top">
    <div class="t450__menu">
      <ul class="t450__list">
        <li class="t450__list_item"><a class="t-menu__link-item " href="" style="color:#000000;font-size:12px;font-weight:500;font-family:'HelveticaNowDisplay';margin-bottom:10px;" data-menu-item-number="1">ABOUT</a> </li>
        <li class="t450__list_item"><a class="t-menu__link-item " href="" style="color:#000000;font-size:12px;font-weight:500;font-family:'HelveticaNowDisplay';margin-bottom:10px;" data-menu-item-number="2">WORKS</a> </li>
        <li class="t450__list_item"><a class="t-menu__link-item " href="" style="color:#000000;font-size:12px;font-weight:500;font-family:'HelveticaNowDisplay';margin-bottom:10px;" data-menu-item-number="3"> - All</a> </li>
        <li class="t450__list_item"><a class="t-menu__link-item " href="" style="color:#000000;font-size:12px;font-weight:500;font-family:'HelveticaNowDisplay';margin-bottom:10px;" data-menu-item-number="4"> - City art</a> </li>
        <li class="t450__list_item"><a class="t-menu__link-item " href="" style="color:#000000;font-size:12px;font-weight:500;font-family:'HelveticaNowDisplay';margin-bottom:10px;" data-menu-item-number="5"> - Dwelling</a> </li>
        <li class="t450__list_item"><a class="t-menu__link-item " href="" style="color:#000000;font-size:12px;font-weight:500;font-family:'HelveticaNowDisplay';margin-bottom:10px;" data-menu-item-number="6">WORKFLOW</a> </li>
        <li class="t450__list_item"><a class="t-menu__link-item " href="" style="color:#000000;font-size:12px;font-weight:500;font-family:'HelveticaNowDisplay';margin-bottom:10px;" data-menu-item-number="7">DETAILS</a> </li>
        <li class="t450__list_item"><a class="t-menu__link-item " href="" style="color:#000000;font-size:12px;font-weight:500;font-family:'HelveticaNowDisplay';margin-bottom:10px;" data-menu-item-number="8">AWARDS &amp; CLIENTS</a> </li>
        <li class="t450__list_item"><a class="t-menu__link-item " href="" style="color:#000000;font-size:12px;font-weight:500;font-family:'HelveticaNowDisplay';margin-bottom:10px;" data-menu-item-number="9">CONTACT US</a> </li>
        <li class="t450__list_item"><a class="t-menu__link-item " href="" style="color:#000000;font-size:12px;font-weight:500;font-family:'HelveticaNowDisplay';margin-bottom:10px;" data-menu-item-number="10">FOLLOW US</a> </li>
        <li class="t450__list_item"><a class="t-menu__link-item " href="" style="color:#000000;font-size:12px;font-weight:500;font-family:'HelveticaNowDisplay';margin-bottom:10px;" data-menu-item-number="11">SOMETHING</a> </li>
        <li class="t450__list_item"><a class="t-menu__link-item " href="" style="color:#000000;font-size:12px;font-weight:500;font-family:'HelveticaNowDisplay';margin-bottom:10px;" data-menu-item-number="12">SOMETHING</a> </li>
        <li class="t450__list_item"><a class="t-menu__link-item " href="" style="color:#000000;font-size:12px;font-weight:500;font-family:'HelveticaNowDisplay';margin-bottom:10px;" data-menu-item-number="13">SOMETHING</a> </li>
        <li class="t450__list_item"><a class="t-menu__link-item " href="" style="color:#000000;font-size:12px;font-weight:500;font-family:'HelveticaNowDisplay';margin-bottom:10px;" data-menu-item-number="14">SOMETHING</a> </li>
        <li class="t450__list_item"><a class="t-menu__link-item " href="" style="color:#000000;font-size:12px;font-weight:500;font-family:'HelveticaNowDisplay';margin-bottom:10px;" data-menu-item-number="15">SOMETHING</a> </li>
        <li class="t450__list_item"><a class="t-menu__link-item " href="" style="color:#000000;font-size:12px;font-weight:500;font-family:'HelveticaNowDisplay';margin-bottom:10px;" data-menu-item-number="16">SOMETHING</a> </li>
        <li class="t450__list_item"><a class="t-menu__link-item " href="" style="color:#000000;font-size:12px;font-weight:500;font-family:'HelveticaNowDisplay';margin-bottom:10px;" data-menu-item-number="17">SOMETHING</a> </li>
        <li class="t450__list_item"><a class="t-menu__link-item " href="" style="color:#000000;font-size:12px;font-weight:500;font-family:'HelveticaNowDisplay';margin-bottom:10px;" data-menu-item-number="18">SOMETHING</a> </li>
      </ul>
    </div>
  </div>
  <div class="t450__rightside">
    <div class="t450__rightcontainer">
      <div class="t450__right_descr t-descr t-descr_xs" field="descr" style="font-family:'HelveticaNowDisplay';">I am ready for a long road flight for working with a week- or months-long projects.</div>
    </div>
  </div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.