用JS控制CSS基本样式的方法?
用JS控制CSS基本样式的方法?
<!DOCTYPE?HTML?PUBLIC?"-//W3C//DTD?HTML?4.0?Transitional//EN">
?<HTML>
?<HEAD>?
<link?rel="stylesheet"?type="text/css"?href="abc.css"?/>?
<TITLE>?New?Document?</TITLE>?
<script>?
window.onload=fnInit;?
function?fnInit(){?
//?访问?styleSheet?中的一条规则,?将其?backgroundColor?改为蓝色。?
var?oStyleSheet=document.styleSheets[0];?
var?oRule=oStyleSheet.rules[0];?
oRule.style.backgroundColor="#0000FF";?}
?</script>
?</HEAD>
<BODY>?
<div?class="class1">aaa</div>
?</BODY>?</HTML>?(2)?
<!DOCTYPE?HTML?PUBLIC?"-//W3C//DTD?HTML?4.0?Transitional//EN">?
<HTML>
?<HEAD>?
<TITLE>?New?Document?</TITLE>?
<style?type="text/css">
<!--?
#apDiv1?{?
position:absolute;?width:399px;?height:195px;?z-index:1;?
border:1px?solid?#000;?background-color:#CCCCCC;?}?-->?
</style>
<script>
window.onload?=?function(){
alert(document.getElementById('apDiv1').currentStyle.width)?}
?</script>?</HEAD>?
<BODY>?
<div?id="apDiv1">aaa</div>?
?
</BODY>?
</HTML>?
还可以用???document.styleSheets(i).href??
可以知道当前页面中引用的每个css的文件！
另：CSS属性与JavaScript编码对照表?
（一定要注意，?上次本人_何向阳，在使用js修改css的中margin-left属性时，总报"left"未定义，后来，找了好多资料，才发现在js中，margin-left的写法为:marginLeft，恍然大悟，希望遇到相同问题的朋友，谨慎对待。）?CSS与JS紧密配合，为我们的页面增添了很多别致的效果。为了达到某种特殊的效果我们需要用Javascript动态的去更改某一个标签的CSS属性。?????比如：鼠标经过一个图片时我们让图片加一个边框，代码可能是这样：JavaScript中style后面的属性应该是什么？?<script?type="text/javascript">?????
function?imageOver(e)?{?????
e.style.border="1px?solid?red";?????}?????
function?imageOut(e)?{?????e.style.borderWidth=0;?????}?????
</script>?
?
<img?src="css.png"?onmouseover="imageOver(this)"?onmouseout="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代码?
<!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>????<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>????<title>JS获取CSS属性值</title>????<style?type="text/css">????<!--??
.ss{color:#cdcdcd;}??-->????
</style>????</head>???
<body>????
<div?id="css88"?class="ss"?style="width:200px;?height:200px;?background:#333333">JS获取CSS属性值</div>????<script?type="text/javascript">????
alert(document.getElementById("css88").style.width);//200px?????alert(document.getElementById("css88").style.color);//空白?????</script>????????</body>????</html>??
上面这个例子对id为"css88"的div设置了2种烦事的样式，包括style和外部样式class。?
从alert出来的信息可以看到，document.getElementById("css88").style方法获取不到class为ss的属性和值。?
那么这么样才能获取到class为ss的属性和值呢？?
IE中使用的是obj.currentStyle方法，而FF是用的是getComputedStyle?方法。?网上一个比较方法是：?
?
XML/HTML代码?
<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">????