Precedence of the difference between CSS () and addclass in JQ

Source: Internet
Author: User

The author found a conflict between CSS () and ADDCLASSD () when I clicked on a row in the table to add a highlight, the code is as follows:

<style>. SE{background:#FF6500;Color:#fff;}</style><Scripttype= "Text/javascript">        $(function(){            $("tbody>tr:odd"). CSS ("Background-color","#FFF38F"); $("Tbody>tr:even"). CSS ("Background-color","#FFFFEE"); $("tbody>tr"). Click (function(){                $( This). addclass ("se"). Siblings (). Removeclass ("SE"). End (). Find (': Radio'). attr ('checked', true);    })            }); </Script>

From the logic of the code alone, there is no mistake. The font color did change after the click, but the background color did not change. It's supposed to be in order, and the last style will overwrite the same style as before. Actually not.

What is this for? First, analyze it from the perspective of priority.

We know that when the same style rules apply to the same element at the same time as the outer style, inner style, and inline styles, the priority is as follows:
  external Style < Inner style < inline style (PS: This priority can be implemented correctly in most cases, but it needs to involve the calculation of weights)

The 1..addClass () method is by adding the class name, so the style is defined in the external file or internal style, and then appended to the element when needed;

2. The inline style is handled by the. CSS () method, which is attached directly to the element through the style property of the element;

Therefore, the style property set by the. CSS method takes precedence over the. AddClass method, and the class name you add when clicked cannot override the style of the CSS () setting.

Precedence of the difference between CSS () and addclass in JQ

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.