• clinentWidth:内容+padding;
  • clientHeight:内容的高+上下的padding;
  • offsetWidth:在clinentWidth基础上+上下边框的宽度;
  • offsetHeight:在clientHeight的基础上加上下边框的宽度;
  • offertParent:一个元素产生偏移量的参照物,默认是文档(网页),body作为文档代理人,在JS里叫offsertParent
  • srcollHeight:实际内容的高,包括溢出的;也是包括padding;溢出的时候,不会重复计算padding的;没有溢出的情况下,此值和clientHeight相同;如果内容溢出,则只包括上padding,不包含下padding;
  • scrollTop:滚动条顶部的位置;

 

  • clientLeft:距左
  • clientTop:距顶
  • offsertLeft:边框距左侧
  • offertTop::边框距右侧:

 

//JS中没有现成的这些属性:直接得到盒子的实际内容的宽高(width,height),

//也没有直接得到margin值的属性:

var oStyle=getComputedStyle(ele,null)

这个getComputedStyle获取的是计算后的样式,包括非常多的东西的;

如果获取像素可以

var attr=”width”

parseInt(oStyle[attr])//这个得到的就是数值,可以做数值运算;

但是IE不支持这个属性;IE要用下面这个:

var astyle=ele.currentStyle;

console.log(aStyle);

兼容的写法如下:

第一种写法

function getCSS(ele,attr){
if(window.getComputedStyle){
return getComputedStyle(ele,null)[attr];
}else{
return ele.currentStyle[attr]
}
}

上面if中window一定要加,因为这个getComputedStyle在IE下是undefined。如果不加window是直接提示报错的;所以要加window;这样就不是把它作为变量,而是作为window的属性;

可以变相转化为:

if(typeof getComputedStyle==”function”)

用的时候可以像下面这么用;

alert(getCSS(ele,"fontSize"));

除了if和else,还可以用

2、try和catch来判断

try{
return getComputedStyle(ele,null)[attr];
}catch (e){
return ele.currentStyle[attr];
}

3、jQuery里关于盒子模型的方法

$("#div1").height();//内容的高
$("#div1").innerHeight();//相当于clientHeight;
$("#div1").outerHeight();//相当于offsetHeight;
$("#div1").outerHeight(true);//offsetHeight+margin(上下的)

——————————————————-

伪类样式;CSS中的用

CSS伪类样式

#p1{height: 2em;line-height: 2em;}
#p1:before{
content: "我是用CSS添加在P1前面的";
color: #ff0000;
background: #000000;
clear: both;
}
#p1::after{
content: "我是用CSS添加在P1后的";
color: green;
background: #000000;
clear: both;
}

里面【:】【::】是一样的,现在的规范是写两个冒号的,但是写一个冒号也支持;

html里就是

<p id="p1">所得税的所得税的</p>

JS获取的伪类样式,如下;

var ele=document.getElementById("p1");
var strcolor=window.getComputedStyle(ele,"before").color;
alert(strcolor);

JS中判断IE8的方法,用if判断字符串的方法:

while(p){
if(window.navigator.userAgent.indexOf("MSIE 8")>-1){
//如果是IE,用这里的代码
l+= p.offsetLeft;
l+= p.offsetTop;
}else{
//不是IE用这段代码;
l+= p.offsetLeft+ p.clientLeft;//加上上一级边框;
l+= p.offsetTop+ p.clientTop;
}
}

——————————————————–

出现股东条的CSS写法

#div1{
width: 200px;
height: 200px;
overflow: auto;//出现滚动条的意思;
}
//滚动条的最大值是=
ele.scrollHeight-ele.clientHeight;

 

·······