jQuery adds priority level of style attributes

Add multiple attributes to the jQuery class

$('#five .a')
.css({
    color:'blue',
    border:'2px solid green',
    background:'blue'
});

jQuer adds a class to the element

$('#five .a')
.addClass('funny');

HTML code

 <style>
.funny{
    font-size: 21px;
    background-color: gray ;
    padding: 10px;
    color: yellow ;
}
 </style>
<div id="five">
    <div class="a">A</div>
</div>

You can see The rendering effect of adding multiple attributes to the jQuery class appears as an inline style.

The class added by jQuer to the element does not have a high priority as the inline style

You can see that there is no funny one in the rendering effectbackground-color: gray ;andcolor: yellow ;Attribute.

The above is the detailed content of jQuery adds priority level of style attributes. For more information, please follow other related articles on the PHP Chinese website!