You have so many hack. What should I do? You have so many hack.

You have so many hack. What should I do? You have so many hack.

When we use javascript to operate css styles, if we stay at the css2 stage, we will find that the operation is not very difficult. Although there are some browser compatibility problems, we can not only set styles but also get styles by encapsulating our own functions. But what happens if javascript encounters css3?

We know that although css3 is currently available in various browsers, it has not yet been officially released as a set of specifications. Therefore, different browsers have different support for css3 attributes. Therefore, "css Hack" is introduced. Good. Why? With css Hack, we can be compatible with various browsers at the css level without using javascript. However, the five browsers have their own Hack headers (safari and chrome are webkit. Ie: ms. Opera: o. Firefox: moz ). This also causes code redundancy to a certain extent. In addition, when we use js to control the attributes of css3, another problem occurs.

This issue is not very difficult. In the final analysis, it is the issue of code redundancy (because we have to set styles for four mainstream kernels separately). So we will solve this problem through functions below:

1 function setHack (ele, attr) {2 // use the for-in loop to traverse attributes 3 for (var I in attr) {4 var newi = I; 5 // does the traversal have-6 if (newi. indexOf ("-")> 0) {7 var num = newi. indexOf ("-"); 8 newi = newi. replace (newi. substr (num, 2), newi. substr (num + 1, 1 ). toUpperCase (); 9} 10 // general attribute setting method 11 ele. style [newi] = attr [I]; 12 newi = newi. replace (newi. charAt (0), newi. charAt (0 ). toUpperCase (); 13 ele. style ["webkit" + newi] = attr [I]; 14 ele. style ["moz" + newi] = attr [I]; 15 ele. style ["ms" + newi] = attr [I]; 16 ele. style ["o" + newi] = attr [I]; 17} 18}

Function Description: The setHack function has two parameters: ele indicates which element you want to set attributes. attr is in json format and contains the attributes and attribute values you set, for example, {"transform": "rotate (20deg)", "transform-origin": "120px 120px "}. The if judgment in the Code mainly refers to converting the "-" contained in the attribute into an uppercase letter format. The following is the core part of the Hack header.