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

Question

Dear Fellow programmers

I am working on a project, that has minimized versions of amChart JavaScript files in it. The problem is I need to change a height of a specific class element in those JS files. However, they are minimized. So I cant really change anything about them.

I got an idea of crating a new JS file, change the height attribute of that class, and place it in the resources page under the other amchart minimized JavaScript files, that way it could read my JS at the end and place the height attribute that I need, since I believe the way it works is it reads the JS files in order.

In case you are wondering why don't I just make a CSS file instead of a JavaScript file is because JS files are read after CSS files so it does not matter where I place it.

Can you tell me if that is how we change a height attribute for a class element in a JavaScript file ? the class is .amchartsLegend

//changing the height attribute of amChartsLegend

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

One more question is should document be replaced by the actual name of the amchart minimized JS file ? assuming that's the correct code for changing the height

Answer 1

Use the for statement since you are using the document.querySelectorAll it returns an array

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

here is an example

 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

Instead of using Javascript, why don't you override the style instead?

<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

you should use

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