Javascript如何访问CSS文件(原创学习笔记)

1. 访问内部CSS
/****************元素定义****************/
<div id='div1' style="
height:100px;
width:100px;
background-color:pink;
"></div>
/*****************访问步骤***************/
<script language="javascript" type="text/javascript">
  <!--
function VisitCSS(){ // 1.通过document. getElementById()方法获取相应网页元素
var div1 = document.getElementById("div1"); // 2.访问元素的style元素，可以获取其值，也可以修改属性值，甚至给其他变量赋值
window.alert(div1.style.height);
}
  //-->
  </script>2. 访问外部CSS文件(类定义的CSS)这个没法使用上面的方法去访问，因为CSS数据不存储在style属性中，它是存储在类中的。所以具体的访问方法为：想去的定义类样式表的引用，用document.styleSheets集合实现这个目的，这个集合包括包含HTML页面的所有样式表，DOM为每个样式表定义一个cssRules的集合，这个集合中包含定义在样式表中的所有CSS规则（注意：Mozilla浏览器和Safasi浏览器中是ccRules,而IE中是rules）/****************样式表定义 ****************/
MyStyle.css：
.style1{
font-weight:bold;
font-size:20px;
height:100px;
width:100px;
background-color:pink;
}
/****************元素定义****************/
<div id='div1' class='style1'></div>/*****************访问步骤***************/
// MyStyle.css文件的引入
<link rel="stylesheet" type="text/css" href=" MyStyle.css">
//访问代码
  <script language="javascript" type="text/javascript">
  <!--
function VisitCSS(){ //获取样式表中的所有类选择器，再次提醒注意不同浏览器的集合应用方式不一样！！
var rules = document.styleSheets[0].rules; //从rules中取出相应的类选择器，当然跟数组元素一样
var MyCss = rules[0]; //访问相应的属性，访问时注意style不可丢掉，要跟访问内部css的区别
window.alert(MyCss.style.height);  </script>