Home > Developer > Web Develop
<!DOCTYPE HTML><HTML><HeadLang= "en"> <MetaCharSet= "UTF-8"> <title>JQuery Learning 7 Control CSS</title> <!--use jquery Don't forget to refer to jquery files - <Scriptsrc=".. /js/jquery-1.12.2.min.js "></Script> <style>. Red{Color:Red; }. Font{font-size:30px; }. Blue{Color:Blue;Background-color:#dedede; } </style></Head><Body><Div>Students, learn well, do not go to the battlefield is eliminated</Div><BR/><BR/><DivID= "DD">Longfeng ..........</Div><BR/><BR/><Pclass= "Font">Hope to help everyone, work together</P><H3>I'm a little headline.</H3><!--above, given the elements, we use jquery to control the style -<!--in order to make the students more convenient to see the effect, we still use a click event to control, first give a click button -<Buttononclick= "ZENGC ()">Click Me, div add class= "red"</Button><Buttononclick= "Shanc ()">Click me to delete the element that has the class= "font" style</Button><Buttononclick= "Qiec ()">Click I, let the element with ID ' DD ' occur style switch</Button><Script> functionZENGC () {$ ("Div"). addclass ("Red"); //Add Class class value to red for DIV element } functionShanc () {$ ("P"). Removeclass ("Font"); //Find the P element and delete it the value of class is font } functionQiec () {$ ("#dd"). Toggleclass ("Blue"); //find ID ' dd ', Toggleclass is toggle, add or delete, class value is blue } //The above is a function called using the Click event,,, below we use a, page load, on the run function $("H3"). css ({"Color":"Red","Background-color":"#000","font-size":"30px", "Margin-left":"200px","width":"200px","Height":"200px"}); //This section of code, is the page loaded after the end of the directly run, modify the element is H3 CSS style. As above //css () method, with a curly brace, write the attribute and value in quotation marks, the form of a key-value pair, a comma distinguishes a set of key-value pairs //with curly braces, you can write multiple key-value pairs, otherwise, write only one, which is written as: //$ ("H3"). CSS ("Color", "red") is not a colon-differentiated, but a comma, because only one can be written. </Script></Body></HTML>The above code shows that the teacher is using CSS inline form, the outside to refer to external files (the presentation of the words to abandon the trouble, but also worry about the students more difficult to understand), embedded words with class classes do not matter, you can not demonstrate the effect here. in style, except for ". Font" The other two are not found on the class name, because in HTML, there is no definition of class= "red" and class= "Blue", all in the CSS style table, inline or outreach, are not found, but, It can't be found at first, it doesn't mean I can't put it in the back. So we use jquery to make a dynamic change of style. referring to the above code, we open the page after the successful refresh, check the source code, call Click event ZENGC (), will find that the page has not only produced the effect, but also can see clearly, Div added class= "value", and this value, is our jquery written, It then plugs the value into the CSS style table, so that the effect changes. We continue, call the Shanc () event, will find that the P element, its own CSS style, is the font size of 30px, and then become smaller, in the check source can be clearly seen, the class attribute is still in, but the value (font) is deleted, so, its CSS style is not. call Qiec () event, the page can see, id "dd" element, font color change, background color change, click the second time, and changed back. Here we use is the Toggleclass () method, toggle this, the students in front of the special effects of jquery to learn the effect has been seen, its meaning is very simple, can be understood as judgment, what judgment? We look at the effect here: we add a class= "blue" to it, and when I click again, it deletes blue, which we understand as "reverse", that is, it has, it becomes no; Here we should note that the ID of "DD" element, it is also Div, in the ZENGC () event, we have added to it class= "red", so here our blue, will be behind the red, delete, will only delete blue, and will not affect red. Do not understand the students, look at the page effect, check the source code, you can read it. Here we say, class, its value, can be multiple, as we demonstrated above, to id= "dd" div element, it both red and blue, that is, two values, because the effect is the font color, they conflict, in the absence of a priority, At the same level, only the code below (the program is running from top to bottom) will run. we end up talking about the H3 element, which has no style in HTML and no CSS. The teacher is in jquery to add the CSS style, run the code, in the check source can find, in jquery added CSS, is embedded in the way oh. The above two types of learning,The first type:The addclass () method is to increase the classRemoveclass () method, delete the class (its value)Toggleclass () method, delete or add (reverse)The above three methods, just control the value of class (in this sense, simple point), the style needs to rely on inline or external The second type:css () method, write CSS styles directly in parentheses in this method. It does not need the help of other, directly write themselves, add style, in the embedded. above, the most used, perhaps only the CSS () method. Of course, the students expand the following, as much as possible to master a number of methods, so in the actual combat, more than one choice.
25th JQuery Learning 7 getting and setting CSS classes
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
