Home > Developer > Web Develop
Add or delete a class style. Switch the selector and class selector.
<1>
<Html xmlns = "http://www.w3.org/1999/xhtml">
<2><Head> <title> </title> <script src = "Jquery/jquery-1.10.2.js" type = "text/javascript"> </script> <script type = "text/javascript"> $ (function () {$ (". btnClass1 ,. btnClass2 ").css (" background "," red "); // set the background color of a form with btnClass1 and btnClass2 to red $ (" # b1, # b2 ").css (" color "," blue "); // set the font color of id attribute b1 or b2 to blue $ (" input, p ").css (" color "," yellow "); // set the font color of the input tag and p tag to yellow $ (" body * ").css (" background ", "yellow"); // set the background color of all labels under the body to yellow }) </script>
What are the restrictions on the use of CSS style ID selector and Class selector during webpage creation?I. Usage principles of ID and CLASS
It is said that W3C sets the ID and CLASS to be unique and the CLASS is universal. Therefore, the principle of use here is also based on this feature.
IDS cannot be repeated. Therefore, in the XHTML structure, IDS must be used for large structures. Such as logo, navigation, subject content, and copyright. The naming rules I have developed are # logo, # nav, # content, # copyright. Some people say that layout uses ID and color background uses CLASS. In fact, this is incorrect. ID has no direct relationship with layout, and the CLASS and color are not equal. Some people use IDs or all use classes for the sake of trouble. It is understandable that they all use IDs, which is contrary to ID uniqueness. If each ID is different, it is not exhausting. The principle I have summarized through practice is: ID must be unique and should be used in the periphery as much as possible. The CLASS is reproducible and should be used within the structure as much as possible. The advantage of this is that it is conducive to the maintenance and modification of website code in the later stage. This way will make all classes become sublevels of IDs or grandchildren.
You can have two sons, but can you have two fathers. When we write CSS, we can write it like this # father. child {...} Try not to include the Class ID,. father # child {...} It would be a bit silly to write it like this. Of course, this is not a matter of course. Special treatment is required in special cases. But in general, this form is not necessary.
The above is the usage principle of ID and CLASS. To sum up one sentence: ID is unique and parent, and CLASS can be repeated and sub-level.
Ii. Tips for using ID and CLASS
1. The child-level naming contains the part of the parent name starting. This makes it easy to clarify the hierarchy when writing CSS.
2. It is best not to use ID for the child level in the CLASS. Of course, special circumstances are special.
3. It is best to use case-insensitive names for CLASS naming. For example, newMovie is the most suitable method to use the explicit relationship with the first statement. Note that browsers other than IE are very case sensitive. Also, it must start with a letter.
In fact, the above is all about what everyone understands, but I just picked it up and wrote it down first, which is a summary. I hope you will put forward new ideas and new ideas for the use of ID and CLASS. Summarize the most appropriate and efficient specifications.
JS Script: How does jquery dynamically add or delete class stylesYou can use the attr () method to obtain the class and set the class. For example, if you use the attr () method to obtain the class of the p element, the JQuery code is as follows: copy the Code as follows: var p_class = $ ("p "). attr ("class"); // obtain the class [html] of the p element. Use the attr () method to set the class of the p element. The JQuery code is as follows: [code] 1 $ ("p "). attr ("'class", "high"); // set the class of the p element to "high". In most cases, it replaces the original class with the new class, instead of appending a new class based on the original one. 2. another {font-style: italic; color: blue;} and then add a "APPEND class" button to the webpage. The event code of the button is as follows: 1 $ ("# btn_3 "). click (function () {2 $ ("# nm_p "). addClass ("another"); // append Style 3}); then, when you click the "APPEND class" button, the p element style will become italic, the previous red font also turns blue. In this case, the p element has two class values, namely, "high" and "another ". There are two rules in CSS. 1. if multiple class values are added to an element, it is equivalent to merging their styles. 2. If different classes have the same style attribute set, the latter overwrites the former. In the preceding example, the following style is added to the p element: copy the Code as follows: 1 color: red;/* set the font color to red */2 font-style: italic; 3 color: blue; two "color" attributes exist in the above style, and the "color" attribute will overwrite the previous "color" attribute, therefore, the final value of the "color" attribute is "blue" instead of "red ". Remove style if you want to delete a value of class when you click a button, you can use the removeClass () method opposite to addClass, it is used to delete all or specified classes from matching elements. For example, you can use the following JQuery code to delete the class with the value of "high" in the p element: 1 $ ("p "). removeClass ("high"); // if you want to delete the two classes of the p element if the value of the p element is "high", you must use the removeClass () method twice, the Code is as follows: 1 $ ("p "). removeClass ("high "). removeClass ("another"); Query provides a simpler method. You can delete multiple class names by spaces. The Code is as follows: 1 $ ("p "). removeClass ("high another"); in addition, you can also use a feature of the removeClass () method to achieve the same effect. When it does not contain parameters, all class values are deleted. The JQuery code is as follows: 1 $ ("p "). removeClass ();&#...... remaining full text>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
