CODEWITHSUNDEEP
javascriptcss
Mozein
Mozein

Reputation: 807

Change css class element height in a javascript file

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

Upvotes: 1

Views: 4573

Answers (4)

Gildas.Tambo
Gildas.Tambo

Reputation: 22643

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>

enter image description here

Upvotes: 2

Sajad Karuthedath
Sajad Karuthedath

Reputation: 15767

you should use

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

Upvotes: 0

felipsmartins
felipsmartins

Reputation: 13549

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

Upvotes: 0

LcSalazar
LcSalazar

Reputation: 16841

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

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

Upvotes: 0

Related Questions