1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77
| <!DOCTYPE html> <html>
<head> <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> 操作CSS属性的工具方法 </title> </head>
<body> <div>疯狂Java讲义</div> <div>轻量级Java EE企业应用实战</div> <script type="text/javascript" src="../jquery-3.1.1.js"> </script> <script type="text/javascript"> (function ($) { var _patterns = { "msie": "progid:DXImageTransform.Microsoft.Gradient(" + "StartColorStr='{0}', EndColorStr='{1}', GradientType=0)", "mozilla": "-moz-linear-gradient(top, {0} 0%, {1} 100%)", "opera": "-o-linear-gradient(top, {0} 0%, {1} 100%)", "webkit": "-webkit-linear-gradient(top, {0} 0%, {1} 100%)", "unknown": "-ms-linear-gradient(top, {0} 0%, {1} 100%)" }; var browserName = function () { if (/firefox/.test(navigator.userAgent.toLowerCase())) return "mozilla"; else if (/opera/.test(navigator.userAgent.toLowerCase())) return "opera"; else if (/webkit/.test(navigator.userAgent.toLowerCase())) return "webkit"; else if (/msie/.test(navigator.userAgent.toLowerCase())) return "msie" else return "unknown"; } var genCssString = function (colorStr, browser) { var reStr = _patterns[browser]; if (!reStr) return null; var colors = colorStr.split(','); if (colors.length != 2) return; return reStr.replace(/\{0\}/, colors[0]) .replace(/\{1\}/, colors[1]); }; $.cssHooks["lineGradBackground"] = { get: function (elem, computed, extra) { return elem.style.background; }, set: function (elem, value) { var b = browserName(); elem.style[b == "msie" ? "filter" : "background"] = genCssString(value, b); } }; })(jQuery); $("body>div").width(300) .height(40) .css("padding", 30); $("body>div:first").css("lineGradBackground", "#e2f, #efe"); $("body>div:last").css("lineGradBackground", "#fff, #111"); </script> </body>
</html>
|