js操作创建和操作外部样式的例子
兼容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
* deleteRule是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操作创建和操作外部样式的例子的更多相关文章
- Gremlins.js – 模拟用户随机操作的 JS 测试库
Gremlins.js 是基于 JavaScript 编写的 Monkey 测试库,支持 Node.js 平台和浏览器中使用.Gremlins.js 随机模拟用户操作:单击窗口中的任意位置,在表格中输 ...
- JS与PHP数组操作的不同
JS与PHP数组操作的不同 1.JS 中向数组中添加元素,必须指定下标 2.php中向数组中添加元素,可以不指定下标(追加) 3.JS 中数组元素的下标,是连续 4.PHP中数组元素的下标,可以不连续 ...
- js中的DOM操作汇总
一.DOM创建 DOM节点(Node)通常对应于一个标签,一个文本,或者一个HTML属性.DOM节点有一个nodeType属性用来表示当前元素的类型,它是一个整数: Element,元素 Attrib ...
- jquery实现点击展开列表同时隐藏其他列表 js 对象操作 对象原型操作 把一个对象A赋值给另一个对象B 并且对象B 修改 不会影响 A对象
这篇文章主要介绍了jquery实现点击展开列表同时隐藏其他列表的方法,涉及jquery鼠标事件及节点的遍历与属性操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了jquery实现点击 ...
- js实现链式操作
前言:前不久阿里远程面试时问了我一个问题,如下: function Person(){}; var person = new Person(); //实现person.set(10).get()返回2 ...
- JS之document对象(找元素、操作内容、操作属性、操作样式及4道例题)
document对象 一.找元素 1.根据id找 示例: <input id = "a" type="button" value="找元素&qu ...
- js基础总结01 --操作DOM
1.选择对象 通过id来选择绑定一个dom节点 :document.getElementById('p1'): 通过类名来绑定一个类数组的对象集合,:document.getElementsByCla ...
- 1 js中常用的操作
总结一些前端js常用的操作 常用日期操作:前端开发常用 JS 方法 js中array.list.map的遍历:js遍历集合(Array,Map,Set) js中对象的定义:js创建自定义对象的几种方式 ...
- 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 ...
随机推荐
- Xcode6 pch文件
XCode6里, 默认是没有pch文件的,如果我们想使用pch文件,需要手动添加,添加步骤如下 1.在XCode6中是么有pch文件的,如下图 2.创建pch文件 3.配置pch文件 ...
- Scrapy学习-7-数据存储至数据库
使用MySQL数据库存储 安装mysql模块包 pip install mysqlclient 相关库文件 sudo apt-get install libmysqlclient-devel sudo ...
- shell的while/for脚本的简单入门
shell的while/for脚本的简单入门 while [condition] dodone关键字break跳出循环,continue跳过循环的余下部分. for var in ...;do...d ...
- 学习技术的三部曲:WHAT、HOW、WHY
★第一步:WHAT 所谓的“WHAT”也就是“What is it?”——这是最简单的层次.在这个层次,你要搞清楚某个东东是[什么]样子的?有[什么]用处?有[什么]特性?有[什么]语法?...... ...
- noip2013货车运输
P1967 货车运输 题目描述 A 国有 n 座城市,编号从 1 到 n,城市之间有 m 条双向道路.每一条道路对车辆都有重量限制,简称限重.现在有 q 辆货车在运输货物, 司机们想知道每辆车在不超过 ...
- BZOJ3674 可持久化并査集
@(BZOJ)[可持久化并査集] Description n个集合 m个操作 操作: 1 a b 合并a,b所在集合 2 k 回到第k次操作之后的状态(查询算作操作) 3 a b 询问a,b是否属于同 ...
- Spring Boot集成Spring Data Reids和Spring Session实现Session共享(多个不同的应用共用一个Redis实例)
从Redis的Key入手,比如Spring Session在注解@EnableRedisHttpSession上提供了redisNamespace属性,只需要在这里设置不同的值即可,效果应该是这样的: ...
- VS2015 当前不会命中断点,还没有为该文档加载任何符号
这种小问题,我想只需要清理解决方案重新生成就好啦,结果...2个小时过去后.. 最后问了昨天做过修改的同事,修改了什么.. 设置成生成调试信息,仅以此文纪念我那逝去的青春
- 快速上传到rackspace cdn工具turbolift swift 安装
快速上传到rackspace cdn 工具安装,2步即可完成: 1.安装git CentOS的yum源中没有git,只能自己编译安装,现在记录下编译安装的内容,留给自己备忘. 确保已安装了依赖的包 y ...
- CSS3绘制灰太狼动画,绝对精彩
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...