Javascript jQuery:获取内联样式而不是主体的CSS_Javascript_Jquery_Html_Css

Javascript jQuery:获取内联样式而不是主体的CSS

javascript jquery html css

Javascript jQuery:获取内联样式而不是主体的CSS,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我试图获得内联元素的真正样式，但它总是将css应用于它。我不想修改我的CSS，太多的页面依赖于它 <body class="processed" style="padding-top: 157px ;margin-top: 0px;"> JS: 结果：body具有内联样式56px，而不是157px 您可以在CSS文件中创建第二个“重要”类，这样就不会影响其他页面，但它会覆盖第一个“重要”类你只需要在第一个类之后编写新的类例如： HTML: 带有的CSS规则！重要信息具有比内联样

我试图获得内联元素的真正样式，但它总是将css应用于它。我不想修改我的CSS，太多的页面依赖于它

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

JS:

结果：

body

具有内联样式

56px

，而不是

157px

您可以在CSS文件中创建第二个“重要”类，这样就不会影响其他页面，但它会覆盖第一个“重要”类

你只需要在第一个类之后编写新的类

例如：

HTML:

带有的CSS规则！重要信息具有比内联样式更高的优先级。要覆盖它，必须使用！重要信息同样适用于内联样式CSS

因此，您的HTML标记必须以如下方式结束：

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

解决了，问题是在DOM就绪后脚本重写了样式…问题解决了！重要提示：发挥了很好的作用。

内联样式是CSS，它只是内联CSS。你在问什么？Javascript修改CSS总是得到元素上当前计算的样式。如果您有100个类规则，它不会显示所有类的css，而是元素当前遵守的一个css规则，因为添加了

！重要信息

对于css，您覆盖了内联样式，因此它将是56px。@adambuchanemissh yes itdoes@AdamBuchananSmith那是因为你已经放了一个

！重要信息

内联样式中的标记，内联样式比类样式更强大。但是在op的例子中没有

！内联padding top
中的重要标记，因此类padding top将覆盖内联标记。
$(function(){
    var pad = $('body').css('padding-top');
    $('body').attr('style','padding-top:'+ pad +' !important; margin-top: 0px;');
   console.log('pad' + pad);    

});

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

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

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