7月17日学习总结

标签：

　　　　周末到了，“快节奏”的一周过去了，本周我们已经学习完了Javascript的3分之2左右的知识，这速度这滋味，简直酸爽，在上周五，我们学习了如何用JS对css进行操作，以及解决浏览器兼容性的问题办法。
function $(id) {
return document.getElementById(id);
}
function onMe() {
var div1 = $("div1");
var div2 = $("div2");
if(div1.className == "div1") {
div1.className = "div2";
} else {
div1.className = "div1";
}
if(div2.className == "div1") {
div2.className = "div2";
} else {
div2.className = "div1";
}
}
如上面的对调DIV样式的代码，我个人理解想要在JS中对css进行局部改变，要classname才可以进行。

document.styleSheets[0].insertRule(".div2:hover{width:200px;height:200px;}", 2);这段代码的意思就是把第一个style（数组）中的位置2位置（IE浏览器要用addRule）。

alert(window.getComputedStyle(div2, null).width)这个意思就是返回div2的宽度。getComputedStyle(对象,null) 火狐浏览器 用来获得实际的样式属性；；{对象.currentStyle.属性 IE浏览器 用来获得实际的样式属性}。

alert(document.styleSheets[0].cssRules[0].cssText); 弹出第一个style里的第一个css文本。

function onMe1() {
alert(document.styleSheets.length);
alert(document.styleSheets[0].cssRules[0].cssText);
document.styleSheets[0].insertRule(".div3{width:200px;height:200px;}", 0);
alert(document.styleSheets[0].cssRules[0].cssText);
document.styleSheets[0].deleteRule(0);
alert(document.styleSheets[0].cssRules[0].cssText);
}
上方代码第一行，是弹出CSS样式的style数组的长度；第三行就是在styleSheets这个数组的第一个style中的第一个属性前面插入.div3{width:200px;height:200px;}；第五行就是删除styleSheets这个数组的第一个style中的第一个属性（也就是刚刚插入的那个）。（这说起来有点不好说）。

上周五的知识量相对于前几天比较少，所以感觉好接受一点，希望以后我能跟上进度。好了理理思绪，随笔就到这里。

7月17日学习总结

标签：

原文地址：http://www.cnblogs.com/webhtmlcss/p/4659857.html