Как изменить псевдоэлементы css в javascript?

я хочу изменить ниже :before значение top псевдоэлемента css через javascript или jQuery динамически ... как я могу это сделать?

#buble{

height:70px;
width:980px;
background-color:#bce5a5;
display:none;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
box-shadow:0px 0px 4px #dadada;
text-indent:35px;
color:#4a8f44;
font-weight:bold;
font-size:14pt;

       }

#buble:before{

content:"";           
display:block;
position:absolute;
top:77px; /* value = - border-top-width - border-bottom-width */
left:555px; /* controls horizontal position */
border-width:11px 7px 0px; /* vary these values to change the angle of the vertex */
border-style:solid;
border-color:#bce5a5 transparent;
width:0;
height:0;
}

person user3509090    schedule 10.04.2014    source источник


Ответы (2)


Насколько мне известно, вы не можете изменять псевдостиль напрямую, но вы можете вставить CSS в головную часть DOM таким образом,

jQuery

$( "div" ).click(function() {

  $('<style>p:before{top:10px}</style>').appendTo('head');

});

Проверьте это Демо jsFiddle

person Jay Patel    schedule 10.04.2014
comment
ты не видел мой ответ? - person Bhojendra Rauniyar; 10.04.2014
comment
@ C-link я видел .. большое спасибо, потратьте свое драгоценное время на ответ на мой вопрос - person user3509090; 18.04.2014

С jQuery вам нужно добавить стиль в голову:

$('<style>#buble:before{top: 50px}</style>').appendTo('head');

подробнее

person Bhojendra Rauniyar    schedule 10.04.2014