Compatible with IE8 and above IE browser
1. [Code][html] Code
<! DOCTYPE html>
<meta charset= "Utf-8" >
<title></title>
<body>
<div id= "Test" ></div>
</body>
<script src= ". /lib/jquery-1.8.3.min.js "></script>
<script>
/*
* Firefox no addRule, low version ie no insertrule,insertrule is the standard
* The code here Insertrule-Addrule is because Inserterrule only
* 2 parameters. 2 parameters to 3 parameters more than one
*/
if (! CSSStyleSheet.prototype.insertRule) {
CSSStyleSheet.prototype.insertRule = function (style, index) {
if (!style) {
Return
}
var style = Style.split ("{");
if (style.length<2) {
Return
}
This.addrule (Style[0], Style[1].split ("}") [0], index);
}
}
/*
* Firefox no removerule, low version ie no deleterule
* Delete? Rule is a network of standard pitch
*/http://www.huiyi8.com/yinxiao/?
if (! CSSStyleSheet.prototype.deleteRule) {
CSSStyleSheet.prototype.deleteRule = function (index) {
This.removerule (index);
}
}
/**
* Create an external style sheet
*/
function Sheet (appendTo) {
var style = document.createelement ("style");
Style.type = ' text/css ';
AppendTo? Appendto.append (Style): $ ("Body"). Append (style);
Return Style.sheet? Style.sheet:style.styleSheet;
}
var sheet = new sheet ();
Sheet.insertrule ("#test {width:100px;height:100px;background:red;border:5px solid green;}", 0);
Sheet.insertrule ("#test {position:absolute;}", 1);
Sheet.insertrule ("#test {position:absolute;}", 2);
var mouseDown = false;
var position;
var style;
var target = $ ("#test");
var x, y;
var rule;
$ ("#test"). MouseDown (function (e) {
MouseDown = true;
x = E.clientx;
y = e.clienty;
Position = Target.position ();
}). MouseMove (function (e) {
if (MouseDown = = True) {
Rule = sheet.cssrules? SHEET.CSSRULES[2]: sheet.rules[2];
Rule.style.top = (position.top + e.clienty-y) + "px";
Rule.style.left = (Position.left + e.clientx-x) + "px";
}
}). MouseUp (function () {
MouseDown = false;
});
</script>