兼容IE8及以上的IE浏览器
1. [代码][HTML]代码 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="test"></div>
    </body>
    <script src="../lib/jquery-1.8.3.min.js"></script>
    <script>
        /*
         * 火狐无 addRule,低版本IE无insertRule，insertRule是w3c标准
         * 此处insertRule -> addRule的代码是因为inserterRule只有
         *2个参数。2个参数转成3个参数状况比较多
         */
        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);
            }
        }
         
        /*
         * 火狐无 removeRule,低版本IE无deleteRule
         * delete​Rule是w3c标准音效网
         */http://www.huiyi8.com/yinxiao/​
        if(!CSSStyleSheet.prototype.deleteRule){
            CSSStyleSheet.prototype.deleteRule = function(index){
                this.removeRule(index);
            }
        }
         
        /**
         * 创建一个外部样式表
         */
        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>
</html>

js操作创建和操作外部样式的例子的更多相关文章

  1. Gremlins.js – 模拟用户随机操作的 JS 测试库

    Gremlins.js 是基于 JavaScript 编写的 Monkey 测试库,支持 Node.js 平台和浏览器中使用.Gremlins.js 随机模拟用户操作:单击窗口中的任意位置,在表格中输 ...

  2. JS与PHP数组操作的不同

    JS与PHP数组操作的不同 1.JS 中向数组中添加元素,必须指定下标 2.php中向数组中添加元素,可以不指定下标(追加) 3.JS 中数组元素的下标,是连续 4.PHP中数组元素的下标,可以不连续 ...

  3. js中的DOM操作汇总

    一.DOM创建 DOM节点(Node)通常对应于一个标签,一个文本,或者一个HTML属性.DOM节点有一个nodeType属性用来表示当前元素的类型,它是一个整数: Element,元素 Attrib ...

  4. jquery实现点击展开列表同时隐藏其他列表 js 对象操作 对象原型操作 把一个对象A赋值给另一个对象B 并且对象B 修改 不会影响 A对象

    这篇文章主要介绍了jquery实现点击展开列表同时隐藏其他列表的方法,涉及jquery鼠标事件及节点的遍历与属性操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了jquery实现点击 ...

  5. js实现链式操作

    前言:前不久阿里远程面试时问了我一个问题,如下: function Person(){}; var person = new Person(); //实现person.set(10).get()返回2 ...

  6. JS之document对象（找元素、操作内容、操作属性、操作样式及4道例题）

    document对象 一.找元素 1.根据id找 示例: <input id = "a" type="button" value="找元素&qu ...

  7. js基础总结01 --操作DOM

    1.选择对象 通过id来选择绑定一个dom节点 :document.getElementById('p1'): 通过类名来绑定一个类数组的对象集合,:document.getElementsByCla ...

  8. 1 js中常用的操作

    总结一些前端js常用的操作 常用日期操作:前端开发常用 JS 方法 js中array.list.map的遍历:js遍历集合(Array,Map,Set) js中对象的定义:js创建自定义对象的几种方式 ...

  9. day45:JS中的json&JS的BOM操作和DOM操作

    目录 1.补充:CSS中的弹性盒子 2.JS中json的序列化 3.JS中的BOM操作 3.1 location操作 3.2 计时器 4.JS中的DOM操作 4.1 创建标签 4.2 查找标签 4.3 ...

随机推荐

  1. POJ2560 Freckles

    Time Limit: 1000MS   Memory Limit: 65536KB   64bit IO Format: %lld & %llu Description In an epis ...

  2. 说说icon图标

    咳咳,其实我是想copy过来的,然而,他竟然是用代码写的图标... (正经脸)话说icon图标是一种网页中常用图标的一种,网络上有各式各样的应用案例,在此就不多啰嗦了.其实我也不过是用着现成的而已,所 ...

  3. python--输出自己需要的字符串连接的的方式

    python中有很多字符串连接方式,今天在写代码,顺便总结一下,从最原始的字符串连接方式到字符串列表连接,大家感受下: 最原始的字符串连接方式:str1 + str2 python 新字符串连接语法: ...

  4. ORA-01940: cannot drop a user that is currently connected 问题解析

    https://www.linuxidc.com/Linux/2012-12/76448.htm

  5. AC日记——栈 洛谷 P1044

    题目背景 栈是计算机中经典的数据结构,简单的说,栈就是限制在一端进行插入删除操作的线性表. 栈有两种最重要的操作,即pop(从栈顶弹出一个元素)和push(将一个元素进栈). 栈的重要性不言自明,任何 ...

  6. BURPSUITE爆破密码

    拿DVWA举例子.环境百度自行搭建. 开启burpsuite 选择temporary project(临时工程) 选择默认配置进入后,访问127.0.0.1:8080 安装证书 将这个intercep ...

  7. Linux下使用nohup实现在后台运行程序（转）

    相比上一篇http://www.cnblogs.com/EasonJim/p/6833417.html使用screen实现后台运行程序,各有各的好处,多一种选择吧. Linux下一般比如想让某个程序在 ...

  8. android 查看手机运行的进程列表

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools=&q ...

  9. poj1351Number of Locks（记忆化搜索）

    题目链接: 传送门 思路: 这道题是维基百科上面的记忆化搜索的例题... 四维状态dp[maxn][5][2][5]分别表示第几根棒子,这根棒子的高度,是否达到题目的要求和使用不同棒子数.那么接下来就 ...

  10. BUPT复试专题—最长连续等差子数列(2014软院)

    题目描述   给定-个长度为N的整数数列,你需要在其中找到最长的连续子数列的长度, 并满足这个子数列是等差的.注意公差小于或等于0的情况也是允许的. 输入 第一行为数据组数T(1~100),表示测试数 ...