在JavaScript文件中更改CSS類元素的高度

Question

親愛的資深程序員

我正在做一個項目，該項目中的amChart JavaScript文件版本已降至最低。 問題是我需要更改那些JS文件中特定類元素的高度。 但是，它們被最小化。 所以我真的不能改變他們的任何事情。

我想到了創建一個新的JS文件，更改該類的height屬性並將其放置在另一個amchart最小化的JavaScript文件下的資源頁面中的想法，這樣它就可以讀取我的JS並將其高度屬性我需要，因為我相信它的工作方式是按順序讀取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

由於您正在使用document.querySelectorAll，因此使用for語句 ，它將返回一個數組

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