Add CSS Dynamically Using Prototype JS

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.

Wouldn't .innerHTML just return the html inside the wrapper-element (which isn't a HTML-element). Try with console.log($('wrapper')); and see if it returns anything at all. Otherwise, you might have to check your selector. — NoLifeKing
– NoLifeKing, Commented Jul 9, 2016 at 7:44
Thanks @NoLifeKing for your reply. I checked console.log($('wrapper')); and I can see the HTML element at console. .innerHTML is returning HTML content of that element. But I would like to apply css on Images of wrapper_content. How can I do that ?? — abu abu
– abu abu, Commented Jul 9, 2016 at 9:02

Geek Num 88 · Accepted Answer · 2016-07-09 15:17:44Z

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/

answered Jul 9, 2016 at 15:17

Geek Num 88

5,3102 gold badges24 silver badges37 bronze badges

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

Comments

NoLifeKing · Accepted Answer · 2016-07-09 10:00:51Z

0

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.

edited Jul 9, 2016 at 10:00

answered Jul 9, 2016 at 9:04

NoLifeKing

1,94913 silver badges27 bronze badges

2 Comments

abu abu Over a year ago

Thanks @NoLifeKing for your reply. You mentioned here jQuery solution but I need Prototype JS solution. Thanks

Walter Over a year ago

Almost right. Prototype uses two dollar signs to signal “return a collection of objects” versus the single dollar sign which is simply shorthand for getElementById. Try var wrapper_content = $$('#wrapper img');.

T. Gibbons · Accepted Answer · 2016-07-11 13:13:20Z

0

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";
});

edited Jul 11, 2016 at 13:13

answered Jul 11, 2016 at 13:07

T. Gibbons

5,0543 gold badges17 silver badges34 bronze badges

Comments

Whojarr · Accepted Answer · 2016-09-14 13:24:59Z

0

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>

answered Sep 14, 2016 at 13:24

Whojarr

161 bronze badge

Collectives™ on Stack Overflow

Add CSS Dynamically Using Prototype JS

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related