Home > Developer > Web Develop
Style operations. CSS () and element data storage.
1. The CSS () method is used to get the calculated value of the element style property or to set the element's CSS properties
2. CSS () 2 ways to get the calculated value of an element style attribute
. CSS (PropertyName) Gets the computed value of the style attribute that matches the first element in the collection of elements
. CSS (propertynames) passes a set of arrays, returning an object result
3 . CSS () 3 ways to set CSS properties for an element
. CSS (propertyname,value) settings css
. CSS (propertyname,function) can pass in a callback function and return to the corresponding value for processing
the. CSS (properties) can pass an object while setting multiple styles
4 Browser properties are obtained in different ways, when you get some values, jquery uses a uniform processing, such as color with RBG, size using px
5. The CSS () method supports the writing of hump writing and sizing, and the internal fault-tolerant processing
6 when a number is used as a value, it is converted to a string and added at the end of the string, such as. css ("width", 50}) as in. css ("width", "50px"})
7. The difference between CSS () and. Assclass ()
7.1 maintainability
the essence of the. Assclass () is to add one or more classes to an element by defining a style rule for the class
. CSS () is a style that changes elements with a lot of JavaScript code
7.2 Flexibility
through . Assclass () can be batch to the same elements set uniform rules, change is more convenient,
Can be modified uniformly delete
The . CSS () needs to specify each element one by one of the modification, future maintenance will have to be modified one by one, more trouble
css () can easily dynamically change the properties of a style without having to go through the tedious definition of a class rule .
7.3 Style values
The . Assclass () essence is simply the addition of class-specific classes that cannot get the value of a property of a specified style
the. css () can get to the specified style value
7.4 Priority of the style
CSS styles are prioritized when the same style rules apply to the same element at the same time as the outer style, inner style, and inline styles, such as inline style > inner style > External style
. Assclass () is by adding the class name, the style is defined in the external file or internal style, and then attached to the element when needed.
Inline styles are handled through. CSS () and are appended directly to the element's Style property
Style attributes that are set through the. CSS () are prioritized higher than. addclass
8 The general static structure determines the rules of the layout and can be used with the. addclass () method to add uniform class rules, and dynamic HTML structures are generally considered in the case of indeterminate rules or frequent changes. CSS ()
9 The Data property is preset or stored in HTML5 with the. Data () method in browsers that do not support HTML5
10 For example: using the Data property
Jquery.data (element,key,value)//static interface, storage data
Jquery.data (Element,key,)//static interface, fetching data
. data (Key,value)//instance interface, memory
. Data (key)//instance interface, memory
2 methods in use Access are the same interface, passing elements, key value data
using the. Data () method
Jquery.removedata (Element[,name])
. Removedata ([name])
2 corresponding Delete interface, using the same with data, one is to add a delete
11 examples
<body>
<div class= "Left" >
<div class= "Aaron" >
<p> Click to see results </p>
<p>jQuery.data</p>
</div>
<div><span></span></div>
</div>
<div class= "Right" >
<div class= "Aaron" >
<p> Click to see results </p>
<p>.data</p>
</div>
<div><span></span></div>
</div>
<script type= "Text/javascript" >
$ ('. Left '). Click (function () {
var ele = $ (this);
Setting up data by using the $.data method
$.data (Ele, "a", "Data Test")
$.data (Ele, "B", {
Name: "Mu-Class Network"
})
Extracting data by $.data method
var reset = $.data (Ele, "a") + "</br>" + $.data (ele, "B"). Name
Ele.find (' span '). Append (reset)
})
</script>
<script type= "Text/javascript" >
$ ('. Right '). Click (function () {
var ele = $ (this);
Setting up data by. Data mode
Ele.data ("A", "Data Test")
Ele.data ("B", {
Name: "Mu-Class Network"
})
Data extraction via.
var reset = Ele.data ("a") + "</br>" + ele.data ("B"). Name
Ele.find (' span '). Append (reset)
})
</script>
</body>
jquery properties and styles--style manipulation--storage of CSS () and element data.
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
