2015-11-30 2 views
3

Я пытаюсь получить реальный стиль встроенного элемента, но он всегда получает к нему css. Я не хочу изменять свой CSS, от него зависит слишком много страниц.jQuery: получить встроенный стиль, а не CSS тела

<body class="processed" style="padding-top: 157px ;margin-top: 0px;"> 

Мой CSS

.processed{padding-top: 56px !important;} 

JS:

$(function(){ 
    var pad = $('body').css('padding-top'); 
    $('body').attr('style','padding-top:'+ pad +' !important; margin-top: 0px;'); 
    console.log('pad' + pad);  

}); 

Результат: body с встроенным стилем 56px, а 157px ...

+0

! Встроенный стиль - это CSS, это просто встроенный CSS. Что ты спрашиваешь? –

+0

Javascript, изменяющий CSS, всегда получает то, что представляют собой текущие расчетные стили на элементах. Если у вас есть 100 правил класса, он не покажет css для всех классов, а только одно правило css, которое элемент выполняет в настоящее время в соответствии с правилами [css specificity] (https://developer.mozilla.org/en -US/docs/Web/CSS/Specificity) –

+1

, добавив '! Important' в ваш css, вы переопределяете встроенный стиль, поэтому он будет 56 пикселей. – Banana

ответ

1

решаемая проблема была скрипт переопределение стилей после того, как DOM готов ... важный сыграл хорошую роль ..

1

Вы можете создать второй " важного "класса в файле CSS, поэтому это не повлияет на r, но он переопределит этот первый «важный» класс.

Вам просто нужно написать этот новый класс после первого.

Например:

HTML:

<body class="processed processed-large-top"> 

CSS:

.processed{padding-top: 56px !important;} 
.processed-large-top{padding-top: 157px !important; margin-top: 0px;} 
0

Правило CSS с важно имеют более высокий приоритет, чем встроенные стили. Чтобы переопределить его, вы должны использовать ! Important также на встроенном CSS стиле.

Итак, ваш HTML тег должен в конечном итоге, как это:

<body class="processed" style="padding-top: 157px !important;margin-top: 0px;"> 
Смежные вопросы