培训管理网站建设,南浦电商网站建设,深圳网站建设怎样做,东莞网站建设-南城石佳W3C DOM2 样式规范 CSSStyleSheet对象 表示所有css样式表#xff0c;包括外部link和嵌入style的;通过document.styleSheets属性可以获得文档中CSSStyleSheet对象的列表#xff1b;其中每个CSSStyleSheet都具有以下属性#xff1a; type: 值始终是text/css;disabled: 布尔值包括外部link和嵌入style的;通过document.styleSheets属性可以获得文档中CSSStyleSheet对象的列表其中每个CSSStyleSheet都具有以下属性 type: 值始终是text/css;disabled: 布尔值表示相应的样式表是否应用与当前文档(false)还是被禁用(true);href: 样式表路径嵌入的则是null;media: 表示样式表应用的目标设备, 中的media属性cssRules: 是一个只读的CSSRuleList列表对象包含样式表中所有的CSSRule对象insertRule(rule, index): 添加新的样式声明index表示列表对象cssRules的值deleteRule(index), 用于样式表中移除规则CSSStyleRule对象 每个CSSStyleSheet对象内部包含着一组CSSStyleRule对象 document.styleSheets[0].cssRule, 每个对象 document.styleSheets[0].cssRule[0]有如下属性: type, 继承自CSSRule对象的一个属性对CSSStyleRule类型而言是1cssText: 包含以只付出形式表示的当前状态下的全部规则如果这些规则被其他DOM方法改变了那么这个字符串也会相应改变;parentStyleSheet: 引用父CSSStyleSheet对象;parentRule: 如果规则位于另一个规则中该属性则引用另一个CSSRule对象;selectorText: 包含规则的选择符CSSStyleDeclaration对象 这是用的最多的对象表示一个元素的style属性内嵌在元素中的值 A.$(a).style cssText包含以字符串形式表示的全部规则;parentRule: 讲引用CSSStyleRule对象getPropertyValue(propertyName), 返回一个字符串形式的CSS样式属性值;removeProperty(propertyName), 从声明中移除特定的属性setProperty(propertyName, value, priotity), 用于设置特定css属性的值;把样式置于DOM脚本之外 style属性 注意通过此属性只能访问到在元素的style属性中以嵌入方式声明的css属性无法访问层叠样式表或从父类继承的属性 element.style.setProperty(background-color,red); //在ie8及以下无效element.style.backgroundColor red;//都有效style引用的是HTMLElement对象的style属性,本身是CSSStyleDeclaration对象一般使用第一种并兼容第二种 基于className切换样式 element.setAttribute(class,newClassName); //在ie8及以下无效element.className newClassName; //都有效className引用的是HTMLElement对象的class属性兼容性考虑一般用第二种方法 切换样式表 使用备用的样式表常用属性 * type
* href
* media
* rel, 表示样式表于文档之间的关系* 设置stylesheet 指定一个样式表立即应用到文档* 设置alternate stylesheet 将其作为备用样式表浏览器载入该样式表时会将其disbaled设置为true
* disabled, 表示样式表是否起作用
* title, 标题也在脚本中用到 通过js操作disabled值改变样式 切换body元素的className先用设置公用样式然后分别设置body.a;body.b等及下面的元素样式最后通过改变body的classname来改变样式 动态载入和移除样式表直接通过js删减样式表 修改css规则 document.styleSheets能获得所有内嵌和外链的样式表,可以通过href判断访问计算样式 DOM2样式规范在document.defaultView中包含了一个getComputedStyle()方法返回一个只读的CSSStyleDeclaration对象 var elemet A.$(example);
var styles document.defaultVIew.getComputedStyle(element);
var color styles.getProperty(background-color); 简单的渐变效果 function fadeColor(from ,to ,callback , duration, framesPerSecond) {function doTimeout(color, frame) {setTimeout(function() {try{callback(color);} catch(e) {A.log.write(e);}}, (duration * 1000 / framesPerSecond) * frame );}var duration duration || 1;var framesPerSecond framesPerSecond || duration * 15;var r, g ,b;var frame 1;doTimeout(rgb( from.r , from.g , from.b ), 0);while(frame framesPerSecond 1) {r Math.ceil(from.r * ((framesPerSecond - frame) / framesPerSecond) to.r * (frame / framesPerSecond));g Math.ceil(from.g * (framesPerSecond - frame) / framesPerSecond to.g * (frame / framesPerSecond));b Math.ceil(from.b * ((framesPerSecond - frame) / framesPerSecond) to.b * (frame / framesPerSecond));doTimeout(rgb( r , g , b ), frame);frame;}}
fadeColor({r:0, g:255, b:0}/*开始颜色*/, {r: 255, g:255, b:255}/*结束颜色*/, function(color) {A.setStyleById(style, {background-color: color})
}); 转载于:https://www.cnblogs.com/jinkspeng/p/4270544.html
