Здравствуйте, подскажите пожалуйста почему не назначаются стили для псевдоэлементов имеющих класс .active?
<div id="wrapper">
<div class="container">
</div>
<p><button>Добавить фигуру</button></p>
</div>
(function($) {
var figindex=0;
var figures =[];
figures[0]= {
'width': '50px',
'height': '50px',
'bg_color' :'grey',
'myfloat' :'none',
};
figures[1]= {
'klass': 'krug',
'width': '50px',
'height': '50px',
'bg_color' :'grey',
'myfloat' :'none',
'borderRadius':'50%'
};
figures[2]= {
'pseudo_before':'',
'position': 'relative',
'width': '54px',
'border_width': '50px 18px 0',
'border_color' :'grey',
'myfloat' :'none',
'border_style':'solid',
'p_content': "",
'p_position': 'abslolute',
'p_height':'0',
'p_width':'0',
'p_top':'-85px',
'p_left':'-18px',
'p_border_width': '0 45px 35px',
'p_border_style': 'solid',
'p_border_color': 'transparent transparent red'
};
$.fn.addCssMyFigure = function( main_css) {
main_css= $.extend({}, figures[figindex], main_css);
return this.each(function(index, self) {
var elem = $(self).addClass('active');
elem.css({
'width': main_css.width,
'height': main_css.height,
'background-color' : main_css.bg_color,
'float' : main_css.myfloat,
'border-radius': main_css.borderRadius,
'border-color': main_css.border_color,
'border-style': main_css.border_style,
'position': main_css.position,
});
$(elem).removeClass('active');
})
};
$(function() {
function injectStyles(f,fx,rule) {
if ('pseudo_before' in f[fx]) {
alert('yes');
$('.active').append('<style>' + rule + '</style>')
}
}
function RandColor() {
var r = Math.floor(Math.random() * (256));
var g = Math.floor(Math.random() * (256));
var b = Math.floor(Math.random() * (256));
var rgb = 'rgb(' + r + ',' + g + ',' + b + ')';
return rgb;
}
function Randsize(f,fx) {
var h = Math.floor(Math.random() * (256));
var w = Math.floor(Math.random() * (256));
f[fx].height=h+'px';
f[fx].width=h+'px'
}
$('button').on('click.createMyFigure', function() {
var container=$('.container');
figindex=Math.round(Math.random()*(figures.length-1));
var color = RandColor();
Randsize(figures,figindex);
container.append('<div class = "active"></div>');
injectStyles(figures,figindex,':before{ content: "text"; }');
$('.container div.active').addCssMyFigure({
bg_color: color,
myfloat: 'left',
});
//console.log(figindex);
});
});
})(jQuery);
проблема в функции injectStyles. если я пишу :before{ content: "text"; } псевдоэлемент назначается всем элементам страницы
