You hack so much ah, what to do

When we use JavaScript to manipulate CSS styles, if we stay in the CSS2 phase, we will find that it is not very difficult to operate. While there are some browser-compatible issues, we can not only set styles but also get styles by encapsulating our own functions. But what happens if JavaScript comes across the CSS3?

We know that although CSS3 is currently present in various browsers, it has not yet been formally released as a set of specifications. Therefore, the various browsers for the CSS3 attribute support situation is different. So there's a "CSS Hack". Very well, why? Because through CSS hack we can be at the level of CSS compatible with each browser, do not need to borrow JavaScript to implement. But the big five browsers have their own hack head (Safari and Chrome are: WebKit. IE is: Ms. Opera is: O. Firefox is: Moz). This also creates some degree of redundancy in the code. And we are using JS to control the properties of the CSS3, there are problems arise.

The problem this time is not very difficult, in the final analysis is the problem of code redundancy (because we have to set the style of the 4 main kernels separately) so let's use the function to solve this problem:

1 functionSethack (ele,attr) {2             //Use the for-in loop to iterate through the attributes inside the attr3              for(varIinchattr) {4                 varNewi =i;5                 //traversal is not there--6                 if(Newi.indexof ("-") >0) {7                     varnum = Newi.indexof ("-");8Newi = Newi.replace (Newi.substr (num,2), Newi.substr (num+1,1). toUpperCase ());9                 }Ten                 //general ways to set properties OneEle.style[newi] =Attr[i]; ANewi = Newi.replace (Newi.charat (0), Newi.charat (0). toUpperCase ()); -ele.style["WebKit" + newi] =Attr[i]; -ele.style["Moz" + newi] =Attr[i]; theele.style["MS" + Newi] =Attr[i]; -ele.style["O" + newi] =Attr[i]; -             } -}

Function Description: The Sethack function has two parameters: Ele represents which element you want to set properties for, attr is a JSON format that contains the properties and property values you set, such as {"Transform": "Rotate (20deg)", " Transform-origin ":" 120px 120px "}. The If judgment in the code is primarily the format in which the attribute contains "-" into uppercase letters. The latter is mainly the core of the hack head.

You hack so much ah, what to do