在javascript文件中更改css类元素高度

Question

亲爱的同事们

我正在开发一个项目，该项目最大限度地减少了amChart JavaScript文件的版本。问题是我需要更改这些JS文件中特定类元素的高度。但是，它们被最小化了。所以我真的无法改变他们的一切。

我知道要创建一个新的JS文件，更改该类的height属性，并将其放在其他amchart最小化的JavaScript文件下的资源页面中，这样它最终可以读取我的JS并放置我需要的height属性，因为我相信它的工作方式是按顺序读取JS文件。

如果您想知道为什么我不制作CSS文件而不是JavaScript文件是因为JS文件是在CSS文件之后读取的，所以我放置它的位置并不重要。

您能告诉我这是否是我们如何更改JavaScript文件中类元素的height属性？该课程是.amchartsLegend

//changing the height attribute of amChartsLegend

var myElements = document.querySelectorAll(".amChartsLegend")
myElement.style.height("20px")

还有一个问题是应该将文档替换为amchart最小化JS文件的实际名称吗？假设有正确的代码来改变高度

Answer 1

使用for statement，因为您使用document.querySelectorAll它会返回一个数组

var myElements = document.querySelectorAll(".amChartsLegend");
console.log(myElements.length);
for (var i= 0; i < myElements.length ; i++) { 
   myElements[i].style.height = "20px"
}

这是一个例子

var myElements = document.querySelectorAll(".amChartsLegend");
console.log(myElements.length);
for (var i= 0; i < myElements.length ; i++) { 
   myElements[i].style.height = "20px"
}

memu li{
  background: #ccc;
}

<menu>
  <li class=amChartsLegend>amChartsLegend</li>
  <li>normal</li>
  <li class=amChartsLegend>amChartsLegend</li>
  <li class=amChartsLegend>amChartsLegend</li>
  <li>normal</li>
  <li>normal</li>
</menu>

Answer 2

而不是使用Javascript，为什么不改写样式呢？

<style type='text/css'>
    .amChartsLegend {
        height: 20px !important;
    }
</style>

Answer 3

var nodes = document.querySelectorAll(".amChartsLegend")
for (var i =0; i < nodes.length; i++) {
    nodes[i].style.height = "20px";
}

Answer 4

你应该使用

var myElements = document.querySelectorAll(".amChartsLegend");
for (var i= 0; i < myElements.lenght ; i++) { 
myElement[i].style.height="20px";
}