Changing css property dyamically using javascript

Question

.gridArea {
  margin-left: 12px;
  margin-bottom: 12px;
  height: 200px;
  width: 98%;
  overflow: auto;
  border: solid 1px #333366;
}

If I have the above css class defined in a file xyz.css and I want to change dynamically the property from "overflow" to "hidden" using JavaScript, how can it be done ?

two ways I would try it is with the .attr() method, or creating a second class that does what you want and using the addClass() and removeClass() methods — mmeasor
– mmeasor, Commented Mar 17, 2014 at 10:41

Banana · Accepted Answer · 2014-03-17 10:40:58Z

1

you can apparently alter the css, some guy explains it Here

or you can change the elements instead of touching the css

var elements = document.getElementsByClassName('gridArea');

for (var i = 0; i < elements.length; i++) {
    elements[i].style["overflow"]="hidden";
}

or if you are willing to try jQUery(which is simply a free javascript extension, you can do it in one line:

$(".gridArea").css({"overflow":"hidden"});

answered Mar 17, 2014 at 10:40

Banana

7,4843 gold badges25 silver badges44 bronze badges

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

Comments

Denis Tsoi · Accepted Answer · 2014-03-17 10:43:38Z

0

Using Query Selector

var el = document.querySelector('.gridArea');
el.style.overflow = "hidden";

answered Mar 17, 2014 at 10:43

Denis Tsoi

10.6k8 gold badges42 silver badges61 bronze badges

Comments

Tibos · Accepted Answer · 2014-03-17 11:56:34Z

The simplest solution to change the property for both current and future elements is to override the overflow property's value in a dynamically created stylesheet element:

var s = document.createElement('style');
s.innerHTML = '.gridArea {overflow: hidden;}';
document.querySelector('head').appendChild(s);

DEMO: http://jsbin.com/galicuto/1/edit

If you only need to change the value for a single element, you could change it via the style property:

var el = document.querySelector('.gridArea');
el.style.overflow = 'hidden';

If you want to change it for all the elements currently in the document, you can do the same, but iterate over the results given by document.querySelectorAll.

Collectives™ on Stack Overflow

Changing css property dyamically using javascript

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related