Change css class element height in a javascript file

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

querySelectorAll does not work like JQuery and you will have to manually loop over the returned elements. — Danny Blue
– Danny Blue, Commented Feb 6, 2015 at 16:37

Gildas.Tambo · Accepted Answer · 2015-02-06 16:35:10Z

2

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

edited Feb 6, 2015 at 16:35

answered Feb 6, 2015 at 16:29

Gildas.Tambo

22.7k7 gold badges53 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mozein Over a year ago

Thank you for this. It turned out I can solve it with css file but this helped me understand well how to include css in a javascript file

LcSalazar · Accepted Answer · 2015-02-06 16:32:44Z

0

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

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

answered Feb 6, 2015 at 16:32

LcSalazar

16.9k3 gold badges40 silver badges71 bronze badges

5 Comments

Mozein Over a year ago

because I tried that already. I placed it in the html file everywhere. it even showed it was under the deferred resources, nothing changed with the height though. I did not add !important but I am assuming that's not necessary.

LcSalazar Over a year ago

@Mozein - You must use !important because the other minified styles may contain selectors with a higher specificity... developer.mozilla.org/en-US/docs/Web/CSS/Specificity

LcSalazar Over a year ago

The !important modifier will override any previous defined property.

Mozein Over a year ago

you were right. !important was the problem. This worked !! Thank you LcSlazar

felipsmartins Over a year ago

LOL it's supposed was a javascript issue

felipsmartins · Accepted Answer · 2015-02-06 16:33:12Z

0

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

answered Feb 6, 2015 at 16:33

felipsmartins

13.6k4 gold badges51 silver badges58 bronze badges

Comments

Sajad Karuthedath · Accepted Answer · 2015-02-06 16:34:59Z

0

you should use

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

answered Feb 6, 2015 at 16:34

Sajad Karuthedath

16.2k4 gold badges35 silver badges50 bronze badges

1 Comment

Sajad Karuthedath Over a year ago

@felipsmartins: it was a typo error...changed it..thanks for pointing it out :)

Collectives™ on Stack Overflow

Change css class element height in a javascript file

4 Answers 4

1 Comment

5 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

5 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related