Показать сообщение отдельно
  #1 (permalink)  
Старый 25.04.2015, 11:35
Аспирант
Отправить личное сообщение для Moloch Посмотреть профиль Найти все сообщения от Moloch
 
Регистрация: 29.10.2013
Сообщений: 94

применить стили к псевдоэлементам
Здравствуйте, подскажите пожалуйста почему не назначаются стили для псевдоэлементов имеющих класс .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"; } псевдоэлемент назначается всем элементам страницы
Ответить с цитированием