动态样式类封装JS代码

文件名StyleSheet.js


代码如下:

// CssRule类由StyleSheet.getRule方法返回，不直接创建
function CssRule(rule) {
this.rule = rule;
this.style = rule.style;
this.selectorText = rule.selectorText;
this.index = null;
}
function StyleSheet() {
var head = document.getElementsByTagName("head")[0];
//通过新建标签来创建新样式
/*
在此不用document.createStyleSheet来完成，是因为在FF下
如果未导入任何CSS文件的情况下document.createStyleSheet方法失败
*/
var style = document.createElement("style");
style.type = "text/css";
head.appendChild(style);
this.CatchStyle(document.styleSheets.length - 1);
}
StyleSheet.prototype = {
//可直接捕获现有Style
CatchStyle: function(index) {
this.style = document.styleSheets[index];
if (navigator.userAgent.indexOf("MSIE") < 0) { //非IE浏览器补丁
this.style.addRule = function(selector, style) {
var index = this.cssRules.length;
this.insertRule(selector + "{" + style + "}", index);
};
this.style.removeRule = function(index) {
this.deleteRule(index);
};
}
},
//新增样式
AddRule: function(selector, style) {
this.style.addRule(selector, style);
},
//删除样式
RemoveRule: function(index) {
this.style.removeRule(index);
},
//取得所有样式
getRules: function() {
if (this.style.rules) { //IE
return this.style.rules;
}
return this.style.cssRules; //非IE
},
//通过选择器，取得样式
getRule: function(selector) {
var rules = this.getRules();
for (var i = 0; i < rules.length; i++) {
var r = rules[i];
if (r.selectorText == selector) {
var rule = new CssRule(r);
rule.index = i;
return rule;
}
}
return null;
}
};

调用示例代码


代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="StyleSheet.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript"><!--
var ss = new StyleSheet();
window.onload = function() {
ss.AddRule(".test", "color:#FF0000; background-color:#F0F0F0; font-size:12px; border:solid 1px #A0A0A0;");
}
function Set() {
var r = ss.getRule(".test");
var slt = document.getElementById("tbSelector").value;
var v = document.getElementById("tbValue").value;
var style = r.style;
style[slt] = v;
}
// --></script>
</head>
<body>
样式<input id="tbSelector" type="text" value="width" />
值<input id="tbValue" type="text" value="300px" />
<input type="button" value="设置" onclick="Set()" />
<div class="test">a</div>
<div class="test">b</div>
<div class="test">c</div>
<div class="test">d</div>
<div class="test">e</div>
</body>
</html>

赞 (0)

相关推荐

  • 动态样式类封装JS代码

    文件名StyleSheet.js 复制代码 代码如下: // CssRule类由StyleSheet.getRule方法返回,不直接创建 function CssRule(rule) { this.rule = rule; this.style = rule.style; this.selectorText = rule.selectorText; this.index = null; } function StyleSheet() { var head = document.getElemen

  • MongoDB操作类封装实例代码

    前言 最近接到一个需求,要做MongoDB打点数据的统计,在学习过MongoDB的操作之后,封装了一个MongoDB的操作类,分为两部分,基本思想是参照了自己写过的mysql的操作类.一个是基本的操作类,包括所有基本操作的静态方法,还有一个是mongoobject,就是具体操作的实现类. 以后再写如何用spring boot写一个简单的统计服务. MongoDB操作类封装 mongobase代码如下: package com.fun.mongodb; import com.fun.frame.S

  • 一个封装js代码-----展开收起效果示例

    第一次靠自己完整的封装的小特效,有点小小的兴奋,和大家分享下,希望能对和我一样在探索的童鞋们有点帮助 js部分: 复制代码 代码如下: var show_obj = function(obj,at,ob){ $(obj).bind('click', function(){ var showTxt = $(this).children(at); //alert($(at).html()); //alert(sObj); //alert(); //alert($(this).parent().chi

  • Java动态调用类中方法代码

    Java动态调用类中方法代码

    在Java中,调用类的方法有两种方式:对于静态方法可以直接使用类名调用,对于非静态方法必须使用类的对象调用.反射机制提供了比较另类的调用方式,可以根据需要指定要调用的方法,而不必在编程时确定.调用的方法不仅限于public的,还可以是private的.编写程序,使用反射机制调用Math类的静态方法sin()和非静态方法equals(). 思路如下:使用Math.class.getDeclaredMethod("sin", Double.TYPE);访问指定的方法,其中"sin

  • 得到文本框选中的文字，动态插入文字的js代码

    复制代码 代码如下: <script language="javascript" src="js/settags.js"></script>  function AppTag(tagcode)  {   document.PostMessage.Message.value += tagcode;  } function InsertTag(tagbegin,tagend)  {   if ((document.selection)&&

  • 动态为事件添加js代码示例

    复制代码 代码如下: <HTML> <HEAD> <script language="javascript"> attachEvent("onblur", blur); function blur() { document.all.form.username.attachEvent("onblur", blur); if(event.srcElement == document.all.form.usernam

  • js用类封装pop弹窗组件

    下面的弹出框组件使用的是类来封装的.一个弹窗组件通过new一个实例来生成. 下面直接上代码: html结构: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> /*基本的样式*/ button{width: 1.6rem;height: 0.5rem;font-

  • 动态创建类实例代码

    例如: import mymodule myobject = mymodule.myclass() 或者 from mymodule import myclass myobject = myclass() 如果要在程序中动态地创建类实例,也一样要分两步走,例如: m = __import__('mymodule') c = getattr(m, 'myclass') myobject = c() 但是要注意:如果myclass并不在mymodule的自动导出列表中(__all__),则必须显式地

  • C++动态数组类的封装实例

    C++中的动态数组(Dynamic Array)是指动态分配的.可以根据需求动态增长占用内存的数组.为了实现一个动态数组类的封装,我们需要考虑几个问题:new/delete的使用.内存分配策略.类的四大函数(构造函数.拷贝构造函数.拷贝赋值运算符.析构函数).运算符的重载.涉及到的知识点很多,对此本文只做简单的介绍. 一.内存分配策略 当用new为一个动态数组申请一块内存时,数组中的元素是连续存储的,例如 vector和string.当向一个动态数组添加元素时,如果没有空间容纳新元素,不可能简单

  • 使用 Node.js 实现图片的动态裁切及算法实例代码详解

    背景&概览 目前常见的图床服务都会有图片动态裁切的功能,主要的应用场景用以为各种终端和业务形态输出合适尺寸的图片. 一张动辄以 MB 为计量单位的原始大图,通常不会只设置一下显示尺寸就直接输出到终端中,因为体积太大加载体验会很差,除了影响加载速度还会增加终端设备的内存占用.所以要想在各种终端下都能保证图片质量的同时又确保输出合适的尺寸,那么此时就需要根据图片 URL 来对原始图片进行裁切,然后动态生成并输出一张新的图片. URL 的设计 图片 URL 需要包含图片 id.尺寸.质量等信息.有两种

随机推荐