2016-02-05 5 views
1

Я использую JQuery, чтобы добавить элемент, такие как:Как переопределить встроенный CSS с классом CSS?

var mytop=100; 
$(this).appendTo('.container') 
     .last() 
     .wrap('<div class="action" style="top:' + mytop + 'px;"></div>'); 

Только mytop является расчетным числом. Так как новый элемент имеет класс action, он должен впоследствии изменить вершину, добавив класс moveup, такие как:

$('document').on('click', function(e){ 
    if($(e.target).hasClass('action')){ 
     $(this).addClass('moveup'); 
    } 
}); 

с CSS, как:

.moveup{ 
    top:5px; 
} 

Проблема в том, инлайн CSS из добавленного <div> переопределяет CSS класса. Когда этот вновь созданный элемент щелкнут, он должен иметь свой верхний набор в 5 пикселей.

Как переопределить встроенный CSS с помощью CSS класса?

+0

'топ: 5px важно,' попробовать – guradio

+0

используя 'верх:! 5px важно,' но будьте осторожны при использовании слишком много '' important' – mylee

+1

если ($ (e.target) .hasClass ('action')) {'- не должен иметь'. 'перед именем класса при использовании с' hasClass' –

ответ

3

https://css-tricks.com/snippets/css/style-override-technique/ Взятые из

! Важное правило в конце значений будет перекрывать любые другие объявления стилей этого атрибута, в том числе встроенных стилей.

p { 
    font-size: 24px !important; 
} 
+0

Да, я пробовал и работает. Благодарим вас за вашу обратную связь. – Sablefoste

+0

Я рад, что смогу помочь. Счастливое кодирование. – MarkP

Смежные вопросы