html - change css property of a div with :after pseudo-element dynamically using jquery -

html - change css property of a div with :after pseudo-element dynamically using jquery -

here situation: have wrapper div, main div within , <img /> in main div, aspect ratio have maintain when window resizes. width , height of <img /> not fixed , may alter 1 image another. maintain aspect ratio of each image preserved, have used :after pseudo-element wrapper class this:

wrapper:after{ padding-top: **%; display: block; content: ''; }

but since don't know width , height of image, have calculate aspect ratio dynamically using jquery when page loads, this:

$("#ad_image_main").load(function(){ var h = $(this).height(); var hh = (h/660)*100; /**/ });

#ad_image_main id of <img /> tag

and have insert in /**/ padding-top value (which hh) wrapper:after-element aspect ratio want.

how can this?

if search web, you'll find couple ways (apply new class, update document.stylesheet), if insert <style> element , write that, should want.

here's fiddle: http://jsfiddle.net/ggzr9/

and basic script:

var $style = $('<style>'); $style.appendto('head'); function updatestyle(px){ var base of operations = "#wrapper:after{display:block;content:'hello';padding-top:" + px + '%}'; $style.html(base); } // phone call updatestyle on resize - no resize, we'll phone call click $('button').on('click', function(){ updatestyle(math.floor(math.random() * 100 )); });

jquery html css