1.读取改变内联样式
读取内联样式:
对象.style.属性名
更改内联样式
对象.style.属性名=属性值
注意:
属性值用字符串形式表示
如果是属性名中间有-符号的,那么需要使用驼峰命名法来转换属性名
比如说background-color ->backgroundColor
改变前:
查询的内联样式:
window.onload=function(){
var alter=document.getElementById("alter");
var get=document.getElementById("get");
var box1=document.getElementById("box1");
//只能读取内联样式,不能读取样式表中的样式
get.onclick=function(){
console.log("box的背景色:"+box1.style.backgroundColor);
console.log("box的宽:"+box1.style.width);
console.log("box的高:"+box1.style.height);
};
/*改变元素的属性:对象.style.属性名=属性值+'';
*/
alter.onclick=function(){
box1.style.width="200px";
box1.style.backgroundColor="aquamarine";
};
改变后:
查询的内联样式:
2.1 IE查看当前样式的方法
currentStyle:IE能使用其他浏览器不能使用,查看当前显示的元素
用法:对象.currentStyle.属性名
getComputedStyle():IE8以及以下浏览器不可使用,其他浏览器使用
用法:参数1:获取对象的目标
参数2:一个伪元素,一般填null
返回值:一个封装了所有目标对象的对象
//获取当前样式
/*
* */
var currentStyle=document.getElementById("currentSytle");
currentStyle.onclick=function(){
console.log("box1.currentStyle.width:"+box1.currentStyle.width);
console.log("box1.currentStyle.height:"+box1.currentStyle.height);
console.log("box1.currentStyle.backgroundColor:"+box1.currentStyle.backgroundColor);
};
IE获取到的样式:
2.2 其他浏览器查看元素当前样式
方法:getComputedStyle()
参数1 要查看元素的元素对象
参数2 传入一个伪元素,一般填null
返回值:该方法会返回一个封装着当前对象所有方法的对象
可以通过 对象.属性名来调用
//获取对象当前样式的所有属性
var getComupted=document.getElementById("getComputed");
getComupted.onclick=function(){
var sy=getComputedStyle(box1,null);
console.log("sy.width:"+sy.width);
console.log("sy.height:"+sy.height);
console.log("sy.backgroundColor:"+sy.backgroundColor);
};
其他浏览器获取到的样式:
3.整合2中查看元素的方式,统一IE和其他浏览器的查看方式
//函数,用来兼容查看元素样式的两种方式
/*参数1:要查看样式的对象
参数2:要查看样式的属性名*/
function getStyle(obj,name){
//判断window是否有这个方法,如果有则调用,
//没有就返回undefined==null
if(window.getComputedStyle){
//不能使用.属性名,这种调用方式,只会调用到对象本身的属性和对象
//需要使用[属性名]
return getComputedStyle(obj,null)[name];
}else{
obj.currentStyle[name];
}
//同理.利用三目运算符也可以
return window.getComputedStyle?getComputedStyle(obj,null)[name]:obj.currentStyle[name];
}
};
//body中的代码
<div id="box1" style="width:200px; background-color:gold ;"></div>
<button id="alter">alter</button>
<button id="get">get</button>
<br />
<button id="currentSytle">currentSytle</button>
<button id="getComputed">getComputed</button>
//style中代码
#box1{
width:100px;
height:100px;
background-color: gray;
}
3.1获取当前元素的高宽
clientHeight,clientWidth
特点:查看元素的内容区+内边距
window.onload=function(){
var bBox=document.getElementById("bigBox");
var sBox=document.getElementById("smallBox");
//clientHeight,clientWidth查看当前元素的长宽
//显示的是包括内容区和内边距
console.log("sBox.clientHeight 长:"+sBox.clientHeight+"sBox.clientWidth 宽:"+sBox.clientWidth);
//offsetHeight,Width显示包括内容区,内边距和边界的box的属性
3.2 查看元素的长宽,top,left
offsetHeight
offsetWidth
offsetTop
offsetLeft
特点:查看元素的内容区+内边距+边界
console.log("sBox.offsetHeight:"+sBox.offsetHeight+" sBox.offsetWidth:"+sBox.offsetWidth)
//offsetTop,offsetLeft距离边界的位置。使用的前提是开启定位
console.log("sBox.offsetTop:"+sBox.offsetTop+" sBox.offsetLeft:"+sBox.offsetLeft);
console.log("bBox.offsetTop:"+bBox.offsetTop+" bBox.offsetLeft:"+bBox.offsetLeft);
4.查看元素的最近的定位父元素
offsetParent,元素的最近的定位父元素(开启了定位的父元素) 如果没有的话,就是body
console.log("sBox.offsetParent.id:"+sBox.offsetParent.id);
5.其他方法
scrollWidth
查看元素整个滚动区域的宽
scrollHeight
查看元素整个滚动区域的高
scrollLeft
获取水平滚动条滚动的距离
scrollTop
获取垂直滚动条滚动的距离