外部样式文件表html,js控制外部样式表和外部样式文件

abc.css

CSS code

.class1

{

width:10px;

background-color: red;

}

HTML code

/p>

Transitional//EN">

href="abc.css" />

New Document

window.οnlοad=fnInit;

function fnInit(){

// 访问 styleSheet 中的一条规则, 将其 backgroundColor 改为蓝色。

var oStyleSheet=document.styleSheets[0];

var oRule=oStyleSheet.rules[0];

oRule.style.backgroundColor="#0000FF";

}

class="class1">aaa

(2)

/p>

Transitional//EN">

New Document

window.onload = function(){

alert(document.getElementByIdx_x('apDiv1').currentStyle.width)

}

id="apDiv1">aaa

还可以用 document.styleSheets(i).href 可以知道当前页面中引用的每个css的文件！

另：CSS属性与JavaScript编码对照表

(一定要注意，

上次本人_何向阳，在使用js修改css的中margin-left属性时，总报"left"未定义，后来，找了好多资料，才发现在js中，margin-left的写法为:marginLeft，恍然大悟，希望遇到相同问题的朋友，谨慎对待。)

CSS与JS紧密配合，为我们的页面增添了很多别致的效果。为了达到某种特殊的效果我们需要用Javascript动态的去更改某一个标签的CSS属性。

比如：鼠标经过一个图片时我们让图片加一个边框，代码可能是这样：JavaScript中style后面的属性应该是什么？

{ e.style.border="1px solid

red"; } function imageOut(e)

{ e.style.borderWidth=0; } 

οnmοuseοut="imageOut(this)" />

JavaScript CSS Style属性对照表

盒子标签和属性对照

CSS语法 (不区分大小写) 　　JavaScript语法 (区分大小写)

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

float　　 floatStyle

margin 　　margin

margin-bottom 　　marginBottom

margin-left 　　marginLeft

margin-right 　　marginRight

margin-top 　　marginTop

padding 　　padding

padding-bottom 　　paddingBottom

padding-left 　　paddingLeft

padding-right 　　paddingRight

padding-top　　 paddingTop

颜色和背景标签和属性对照

CSS语法 (不区分大小写) 　　JavaScript语法 (区分大小写)

background 　　background

background-attachment 　　backgroundAttachment

background-color　　 backgroundColor

background-image 　　backgroundImage

background-position　　 backgroundPosition

background-repeat 　　backgroundRepeat

color 　　color

样式标签和属性对照

CSS语法 (不区分大小写) 　　JavaScript语法 (区分大小写)

display 　　display

list-style-type　　 listStyleType

list-style-image 　　listStyleImage

list-style-position　　 listStylePosition

list-style　　 listStyle

white-space　　 whiteSpace

文字样式标签和属性对照

CSS语法 (不区分大小写) 　　JavaScript语法 (区分大小写)

font　　 font

font-family　　 fontFamily

font-size　　 fontSize

font-style　　 fontStyle

font-variant　　 fontVariant

font-weight 　　fontWeight

文本标签和属性对照

CSS语法 (不区分大小写) 　　JavaScript语法 (区分大小写)

letter-spacing　　 letterSpacing

line-break　　 lineBreak

line-height　　 lineHeight

text-align　　 textAlign

text-decoration 　　textDecoration

text-indent 　　textIndent

text-justify　　 textJustify

text-transform 　　textTransform

vertical-align　　 verticalAlign

obj.style方法，这个方法只能JS只能获取写在html标签中的写在style属性中的值(style="...")，看一下代码

XML/HTML代码

/p>

Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  

 

/> 

JS获取CSS属性值    

JS获取CSS属性值

   

上面这个例子对id为"css88"的div设置了2种烦事的样式，包括style和外部样式class。

从alert出来的信息可以看到，document.getElementByIdx_x("css88").style方法获取不到class为ss的属性和值。

那么这么样才能获取到class为ss的属性和值呢？

IE中使用的是obj.currentStyle方法，而FF是用的是getComputedStyle 方法。

网上一个比较方法是：

XML/HTML代码

/p>

Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  

 

/> 

S获取CSS属性值    

>sdf

   

当然，如果您是引用外部的css文件同样适用。

另：可以将上面的方法简化为

JavaScript代码

function getDefaultStyle(obj,attribute){ //

返回最终样式函数，兼容IE和DOM，设置参数：元素对象、样式特性 return

obj.currentStyle?obj.currentStyle[attribute]:document.defaultView.getComputedStyle(obj,false)[attribute]; }