3

I would like to get all elements (all divs) in a page with CSS property position:fixed; and remove or change that property.

Is that possible with JavaScript / jQuery?

Guillermo Carone
  • 818
  • 2
  • 9
  • 24
  • 1
    Yes, that's possible. – Ram Jul 25 '15 at 20:57
  • @Vohuman Hahaha! Well that is very nice to hear! Now woud you by any chance know how to acomplish this? – Guillermo Carone Jul 25 '15 at 20:59
  • possible duplicate of [jQuery Select Elements with a certain CSS](http://stackoverflow.com/questions/9255312/jquery-select-elements-with-a-certain-css) – MazzCris Jul 25 '15 at 21:03
  • 1
    You can use **each()** (http://api.jquery.com/jquery.each/) to go through all the div, than use **css()** (http://api.jquery.com/css/) to read the div properties. – nstungcom Jul 25 '15 at 21:09

4 Answers4

2

Yes, it's possible. You can select the div elements using document.querySelectorAll method and then filter the elements that have fixed position: 

[].forEach.call(document.querySelectorAll('div'), function(el) {
    if (window.getComputedStyle(el).position === 'fixed') {
       // el.style.position = 'relative';
    }
});
Ram
  • 143,282
  • 16
  • 168
  • 197
  • Amazing! Thank you so much! :) – Guillermo Carone Jul 25 '15 at 21:13
  • @GuillermoCarone You are very welcome! :) – Ram Jul 25 '15 at 21:14
  • 1
    @Vohumna Hhmm... I tested the code with an alert and it definitely finds the divs with `position:fixed`, however when I try to change that property I get the following error: Uncaught NoModificationAllowedError: Failed to set the 'position' property on 'CSSStyleDeclaration': These styles are computed, and therefore the 'position' property is read-only. Any idea why? – Guillermo Carone Jul 25 '15 at 21:22
  • @GuillermoCarone How exactly do you try to change the property value? Can you post the snippet? And have you tried the commented snippet of the above answer? – Ram Jul 25 '15 at 21:26
  • I was trying to change the property value with the following `window.getComputedStyle(el).position = "absolute";` probably not the way to go right? :S I really need to sit down and study my JS... – Guillermo Carone Jul 25 '15 at 21:28
  • 1
    @GuillermoCarone Yes, that property is read-only. Using `style` property you can reset the property value. – Ram Jul 25 '15 at 21:30
  • You mean something like `window.getComputedStyle(el).style.position = "absolute";` ? – Guillermo Carone Jul 25 '15 at 21:36
  • No, I mean `el.style.position = 'absolute';`. – Ram Jul 25 '15 at 21:40
0

Yes you can do it with jquery each() and css() functions :

Js code :

$('div').each(function(){ //loop over all the divs

     //Condition for the div with style propriety position:fixed;
     if($(this).css('css('position')=="fixed"){
          //Do the change you want
     }
})
Zakaria Acharki
  • 66,747
  • 15
  • 75
  • 101
0

It can certainly be done, just not very efficiently. @Vohuman implements this nicely in plain javascript. I recommend taking a look at this similar post which has answers that are implemented in jQuery as well Select all elements that have a specific CSS, using jQuery

Community
  • 1
  • 1
Daniel Kobe
  • 9,376
  • 15
  • 62
  • 109
0

you have to get all elements in a node collection with the method "querySelectorAll" likes this:

var divCollection = document.querySelectorAll('div');

Then you have to check with a loop for the element state like this:

    for(var i=0; i<divCollection.length;i++){
       var elementState = $(divCollection[i]).css('position');
       console.log(elementState);
    }
Daniel Carvajal
  • 63
  • 1
  • 9