周末到了,“快节奏”的一周过去了,本周我们已经学习完了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中的第一个属性(也就是刚刚插入的那个)。(这说起来有点不好说)。
上周五的知识量相对于前几天比较少,所以感觉好接受一点,希望以后我能跟上进度。好了理理思绪,随笔就到这里。