Hi,
consider CSS template (separate from HTML file) with:
.box {
...
margin-left: auto;
margin-right: auto;
...
}
Now I want to wrap this box inside another one that is created by
JavaScript but to preserve margin adjustment. So, I'd do something
like:
<span id='box_to_wrap' class='box'>
Hello World!
</span>
...
<script type='text/javascript'>
window.addEvent( 'domready', function() {
var _el = $( 'box_to_wrap');
var _wrapper = new Element( 'div');
// I SKIP HERE _wrapper SETUP TO BE BLOCK, OF THE SAME WIDTH AND
HEIGHT AS _el. CONSIDER THAT IS DONE
_wrapper.inject( _el, 'after');
_wrapper.adopt( _el);
// NOW I WANT TO SET WRAPPERS MARGIN-LEFT AND RIGHT TO WHATEVER IS
SET IN ELEMENT STYLE
_wrapper.setStyles( _el.getStyles( 'margin-left', 'margin-right'));
});
</script>
Unfortunately the line where styles are set for wrapper won't work
because:
_el.getStyles( 'margin-left', 'margin-right');
returns 0 margins or specific numbers that Browser has defined on
first render of page but not 'auto'.
Interesting moment is that if I explicitly specify margin-left and
margin-right to have auto values in style of 'box_to_wrap' element
within HTML opening tag everything works fine.
Question: is there any way to get 'auto' value in case CSS for class
is defined in external template file and not explicitly via
style='...' ?
