1.对于getComputedStyle()方法 即便浏览器支持border 但表示值的方式可能会有区别,因此在使用getComputedStyle()方法是,最好先在几个浏览器中测试下 (注):IE有个myDiv.currentStyle与之等价 以上计算的样式都是只读的。
2.应用于文档的所有样式表用document.styleSheets集合表示 。可以使用sheet = element.sheet || element.styleSheet 表示获取样式表对象的内容;这里使用这种方法返回的样式与document.styleSheets集合中的样式表对象相同
3.取得第一条规则的方法如下:var sheet = document.styleSheets[0] ; var rules = sheet.cssRules || sheet.rules; var rule = rules[0]; alert(rule.selectorText); alert(rule.style.width); 也可以同时对其进行设值 如rule.tyel.width = 200px;
4.跨浏览器向样式表插入规则sheet.insertRule (除IE支持) sheet.addRule(IE支持) 其中sheet的值为document.styleSheets[0]因此代码如下:
function insertRule(sheet,selectorText,cssText,position){
if (sheet.insertRule){
sheet.insertRule(selectorText + "{" + cssText + "}" , position);
} else if (sheet.addRule){
sheet.addRule(selectorText,cssText,position);
}
} 然后用insertRule(document.styleSheet[0],"body","width:200px",0);来调用 //不怎么实用
5.跨浏览器删除规则sheet.deleteRule(0)DOM方法 sheet.removeRule(0)仅对IE有效代码如下:
function deleteRule(sheet, index){
if(sheet.deleteRule){
sheet.deleteRule(index);
} else if (sheet.removeRule) {
sheet.removeRule(index);
}
} 然后使用deleteRule(document.styleSheet[0], 0); //这个方法也不实用;
6.偏移量 有4个属性取得元素的偏移量offsetHeight:元素在垂直方向上占用的空间大小,以像素计。包括元素的高度,(可见的)水平滚动条的高度、上边框高度和下边框高度 offsetWidth:元素在水平方向上占用的空间大小,以像素计。包括元素的宽度,(可见的)水平滚动条的宽度、左边框宽度和右边框宽度 offsetLeft:元素的左外边框至包含元素的左内边框之间的像素距离 offsetTop:元素的上外边框至包含元素的上内边框之间的像素距离 以上的属性都是只读的,每次访问都要重新计算
7.客户区大小:是元素内容及其内边距所占据的大小有关属性有clientWidth和clientHeight 他们不包括边框的大小。以上的属性都是只读的,每次访问都要重新计算
8.滚动大小:指包含滚动内容的元素大小。属性有scrollHeight scrollWidth(在没有滚动条的情况下,为元素内容的总高度和总宽度) scrollLeft 和scrollTop:被隐藏内容区域左侧或上方的像素数 可以通过设置这个属性改变元素的滚动位置 。实例如下
<body>
<div style="width:200px;height:200px;background-color:orange;overflow:auto;" id="ep">
<div style="width:100px;height:300px;background-color:green;" id="ip">
这些文字显示在内层元素中。
</div>
</div>
<p>scrollTop值是:<span id="stValue"></span></p>
<p>
<input type="button" onclick="div_ep.scrollTop = 50; disp();" value="把scrollTop设为50" />
<input type="button" onclick="div_ep.scrollTop = 500; disp();" value="把scrollTop设为500" />
</p>
<p>
wst:<input type="text" id="wst" value="" />
<input type="button" onclick="wstz()" name="设置scrollTop的值" value="确定" />
</p>
<script type="text/javascript">
//注意()里头要加""号
var div_ep = document.getElementById("ep");
var span_stValue = document.getElementById("stValue");
function disp(){
span_stValue.innerHTML = div_ep.scrollTop;
}
disp();
function wstz() {
if("" != document.getElementById("wst").value){
div_ep.scrollTop = document.getElementById("wst").value;
disp();
} else
alert("请输入一个数值");
}
//注意橙色的一块没有动
</script>