您的位置：首页 > Web前端 > JavaScript

javascript学习——样式

2016-06-08 10:57 881 查看

本文包括样式的各种属性和创建样式，获取样式和操作样式的各种方法。

1、样式：

定义样式：1、可以通过<style>在<head>里面引用。

2、可以通过<link/>包含外部样式表

3、可以通过<style>特性定义针对特定元素的样式。

属性：style有各种属性。

1、cssText：返回样式的css代码。

2、length：应用给元素的css属性的数量，一般跟item()方法配合使用

3、parentRule：表示css信息的CSSRule对象

4、直接访问定义的css，可以直接用ele.style.JavaScript属性 eg: myDiv.style.width;

方法：1、getPropertyCSSValue(propertyName)：返回给定属性的字符串值

2、getPropertyValue(): 返回css属性值的字符串表示

2、item(index)：返回指定位置的CSS属性的名称

3、removeProperty(propertyName)：从样式表中删除给定属性

4、setProperty(propertyName,value,priority): 将给定属性设置为相应的值，并可以加上优先级（！important）

var prop, value,i,len;
for(i=0,len = myDiv.style.length; i<len; i++){
prop = myDiv.style[i];
value = myDiv.style.getPropertyValue(prop);
alert(prop+":"+value);
}

获取计算的样式：即获取经过多个样式表叠加后获取的样式。如果不是IE浏览器，使用document.defalutView.getComputeStyle(ele,null)；方法。如果是IE浏览器，使用currentStyle属性。
function getComputeStyle(ele){
var computeStyle = document.defaultView.getComputeStyle(ele);
if(computeStyle){
return computeStyle;
}else{
return ele.currentStyle;
}
} CSS规则：CSSRule对象表示样式表中的每一条规则。实际上，CSSRule是一个供其它多种类型继承的基类型，最常用的是CSSStyleRule类型，表示样式信息。
属性：1、cssText:返回全部规则文本

2、parentRule：如果是导入的规则，则返回引入的导入规则；否则返回null

3、parentStyleSheet: 当前规则所属的样式表。IE不支持

4、selectorText：返回当前规则的选择符文本

5、style：一个CSSStyleDeclaration对象，可以通过它设置和取得规则中特定的样式值。

6、type：规则类型的常量值，样式规则为1.IE不支持。

常用的属性：cssText、selectorText、style。

div.box{
background-color:red;
width:100px;
height:200px;
}

var stylesheet = document.styleSheet[0];
var rules = stylesheet.cssRules || stylesheet.rules;
var rule = rules[0];

alert(rule.selectorText); // div.box
alert(rule.style.backgroundColor);//red
方法：1、insertRule(text,position): 在position的位置插入css文本。如果是IE，使用addRule（ele,text,position）方法。

2、deleteRule(positon):删除指定位置的css规则。如果是IE，使用removeRule(position)方法

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航