Style currentStyle computedStyle 和 runtimeStyle 的区别
内嵌样式（inlineStyle） ：是写在Tag里面的，内嵌样式只对所有的Tag有效。
<P style="font-size:20pt; color:red">AAAA</p>
这个Style定义<p></p>里面的文字是20pt字体，字体颜色是红色。
内部样式（internal Style Sheet）：是写在HTML的<head></head>里面的，内部样式只对所在的网页有效。
<HTML>
<HEAD>
<STYLE type="text/css">
H1.mylayout {border-width:1; border:solid; text-align:center; color:red}
</STYLE>
</HEAD>
<BODY>
<H1 class="mylayout"> 这个标题使用了Style。</H1>
<H1>这个标题没有使用Style。</H1>
</BODY>
</HTML>
外部样式表（External Style Sheet）：如果很多网页需要用到同样的样式(Styles)，将样式(Styles)写在一个以.css为后缀的CSS文件里，然后在每个需要用到这些样式(Styles)的网页里引用这个CSS文件。
<HEAD>
<link href="../asdocs/css_tutorials/home.css" rel="stylesheet"type="text/css">
</HEAD>
CSS第一个字母，是Cascading，意为串联。它是指不同来源的样式(Styles)可以合在一起，形成一种样式。
样式(Styles)的优先级依次是内嵌(inline), 内部(internal),外部(external),浏览器缺省(browserdefault)。
假设内嵌(Inline)样式中有font-size:30pt,而内部(Internal)样式中有font-size:12pt，那么内嵌(Inline)式样式就会覆 盖内部(Internal)样式。
Style为内嵌样式
runtimeStyle 运行时的样式！如果与style的属性重叠，将覆盖style的属性！
currentStyle 代表了在全局样式表、内嵌样式和 HTML 标签属性中指定的对象格式和样式。
当指定了runtimeStyle，那么当前显示的样式以runtimeStyle为准，如果取消了runtimeStyle，那么当前显示样式就恢复到currentStyle的样式。
ComputedStyle 计算样式可以通过document.defaultView.getComputedStyle()方法获取，该方法返回一个CSSStyleDeclaration对象，其中包含当前元素的所有计算样式。该方法接受两个参数，第一个目标元素，第二个是伪元素字符串(例如”:after”)，可以是null，使用方法如下(仍以上面的html为例)：
var ele = document.getElementById("myDiv");
var computedStyle = document.defaultView.getComputedStyle(ele,null);
alert(computedStyle.width);//"100px"
alert(computedStyle.backgroundColor);//"red" | "rgb(255,0,0)" 等(看浏览器实现)
alert(computedStyle.border);//在某些浏览器中可能是"1px solid black"
computedStyle.width = "200px";//错误
上面对于css中用短线(‘-’)连接的属性无法直接访问，需要通过Pascal命名规范来访问，不过有些属性无法访问(稍后介绍)。其中border由于是复合属性所以部分浏览器中无法访问，不过可以使用相应的borderTopWidth等细化属性来访问。最后引发错误是因为计算样式是只读的。如果需要修改样式貌似只能通过DOM元素的style属性进行修改。但是IE不支持getComputedStyle()方法，不过IE给每个拥有style属性的元素实现了currentStyle(CSSStyleDeclaration对象)属性，可以获取到计算样式。使用方法更简单：
//将上面的document.defaultView.getComputedStyle(ele,null)改为：
var computedStyle = ele.currentStyle;
不过对于css中的float属性，由于JavaScript将float作为保留字，所以不能将其用作属性名，因此有了替代者，在IE中是”styleFloat”,而在FireFox、Safari、Opera和Chrome中则是”cssFloat”。
所以基于兼容性的考虑可以将样式操作改为如下形式：
//element:需要获取样式的目标元素;name:样式属性
function getStyle(element,name){
var computedStyle;
try{
computedStyle = document.defaultView.getComputedStyle(element,null);
}catch(e){
computedStyle = element.currentStyle;
}
if(name != "float"){
return computedStyle[name];
}
else{
return computedStyle["cssFloat"] || computedStyle["styleFloat"];
}
}
//element:需要设置样式的目标元素;name:样式属性;value:设置值
function setStyle(element,name,value){
if(name != "float"){
element.style[name] = value;
}
else{
element.style["cssFloat"] = value;
element.style["styleFloat"] = value;
}
}
上面的代码可以跨浏览器实现操作某个元素的css。当然你可以使用jQuery的css(name,value)函数来更方便的实现以上操作。
CSS Properties To JavaScript ReferenceConversion
| CSS Property |
JavaScript Reference |
| background |
background |
| background-attachment |
backgroundAttachment |
| background-color |
backgroundColor |
| background-image |
backgroundImage |
| background-position |
backgroundPosition |
| background-repeat |
backgroundRepeat |
| border |
border |
| border-bottom |
borderBottom |
| border-bottom-color |
borderBottomColor |
| border-bottom-style |
borderBottomStyle |
| border-bottom-width |
borderBottomWidth |
| border-color |
borderColor |
| border-left |
borderLeft |
| border-left-color |
borderLeftColor |
| border-left-style |
borderLeftStyle |
| border-left-width |
borderLeftWidth |
| border-right |
borderRight |
| border-right-color |
borderRightColor |
| border-right-style |
borderRightStyle |
| border-right-width |
borderRightWidth |
| border-style |
borderStyle |
| border-top |
borderTop |
| border-top-color |
borderTopColor |
| border-top-style |
borderTopStyle |
| border-top-width |
borderTopWidth |
| border-width |
borderWidth |
| clear |
clear |
| clip |
clip |
| color |
color |
| cursor |
cursor |
| display |
display |
| filter |
filter |
| font |
font |
| font-family |
fontFamily |
| font-size |
fontSize |
| font-variant |
fontVariant |
| font-weight |
fontWeight |
| height |
height |
| left |
left |
| letter-spacing |
letterSpacing |
| line-height |
lineHeight |
| list-style |
listStyle |
| list-style-image |
listStyleImage |
| list-style-position |
listStylePosition |
| list-style-type |
listStyleType |
| margin |
margin |
| margin-bottom |
marginBottom |
| margin-left |
marginLeft |
| margin-right |
marginRight |
| margin-top |
marginTop |
| overflow |
overflow |
| padding |
padding |
| padding-bottom |
paddingBottom |
| padding-left |
paddingLeft |
| padding-right |
paddingRight |
| padding-top |
paddingTop |
| page-break-after |
pageBreakAfter |
| page-break-before |
pageBreakBefore |
| position |
position |
| float |
styleFloat |
| text-align |
textAlign |
| text-decoration |
textDecoration |
| text-decoration: blink |
textDecorationBlink |
| text-decoration: line-through |
textDecorationLineThrough |
| text-decoration: none |
textDecorationNone |
| text-decoration: overline |
textDecorationOverline |
| text-decoration: underline |
textDecorationUnderline |
| text-indent |
textIndent |
| text-transform |
textTransform |
| top |
top |
| vertical-align |
verticalAlign |
| visibility |
visibility |
| width |
width |
| z-index |
zIndex |