Question

我正在尝试获得内联元素的真实样式，但它总是将css应用于它。我不想修改我的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 ...

Answer 1

你可以创建第二个重要的＆＃34; CSS文件中的类，因此它不会影响其他页面，但它会覆盖第一个＆＃34; important＆＃34;类。

你必须在第一个之后编写新课程。

例如：

HTML：

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

CSS：

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

Answer 2

解决了，问题是在DOM准备好后脚本覆盖样式......重要的是扮演了一个很好的角色..

Answer 3

！important 的CSS规则优先于内联样式。要覆盖它，您还必须在内联样式CSS中使用！important 。

因此，您的HTML标记最终必须如下：

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

jQuery：获取内联样式而不是body的CSS

3 个答案: