使用原型JS动态添加CSS

Question

I would like to add CSS to an HTML Element dynamically using Prototype JS. I am using below code.

var wrapper_content = $('wrapper').innerHTML;
wrapper_content.img.setStyle({display:'inline'});

But this is not working.

Answer 1

In cases like these you can use the invoke() utility method like so

$$('#wrapper img').invoke('setStyle',{'display':'inline'});

http://api.prototypejs.org/language/Enumerable/prototype/invoke/

Answer 2

You could change your selector to var wrapper_content = $('wrapper img');

And then you can do like this wrapper_content.each(function(el) { el.setStyle({ 'display': 'inline' }); });

Edit: Changed the syntax to work with Prototype JS instead.

Answer 3

Seems to me you are asking about adding a style to images that are children of the element with the id 'wrapper':

$('wrapper').select('img').each(function(name,index) {
  name.style.display = "inline";
});

Answer 4

Ive been using a combination of Geek Num 88 and T Gibbons answers for a few years. its a combination of css selectors and setting the style display value is more obvious.

 $$('#wrapper img').each(function(name) { name.style.display = "inline"; }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/prototype/1.7.3/prototype.js"></script> <div id="wrapper"> <img style="display: none;" src="https://cdn0.iconfinder.com/data/icons/free-business-desktop-icons/128/Home.png" /> </div>