2020年新年大赛！

Question

Andrew Gor

Asked:2020-10-20 21:21:54 +0000 UTC2020-10-20 21:21:54 +0000 UTC 2020-10-20 21:21:54 +0000 UTC

使用 javaScript 更改对象的样式

772

有一个由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 个回答

Voted

Wolframm · Answer 1 · 2020-10-21T18:16:45Z

Wolframm

2020-10-21T18:16:45Z2020-10-21T18:16:45Z

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);
     }

接下来，已通过 id 联系：

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

祝你好运。

1

Евгений Борисов · Answer 2 · 2020-10-21T19:45:00Z

这里不需要js。足够的 css 注意 - 如果需要，添加到规则!important中。波浪号将部分样式扔到样式属性中

.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>

Swartex · Answer 3 · 2020-10-21T18:25:48Z

你可以像这样使用 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>

Xhonor · Answer 4 · 2020-10-21T19:32:35Z

查询：

$('.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>

使用 javaScript 更改对象的样式

根据浏览器窗口的大小调整背景图案的大小

理解for循环的执行逻辑

复制动态数组时出错（C++）

Or and If,elif,else 构造[重复]

如何构建支持 x64 的 APK

如何使按钮的输入宽度？

如何显示对象变量的名称？

如何循环一个函数？

LOWORD 宏有什么作用？

从字符串的开头删除直到并包括一个字符

使用 javaScript 更改对象的样式

4 个回答

相关问题