dom操作css
2022-07-17 本文已影响0人
冰点雨
解决浏览器兼容，获取div样式
function getStyle(obj,name){
// window是否有这个方法
if(window.getComputedStyle){
// 正常浏览器
return getComputedStyle(obj,null)[name];
}else{
// Ie8
return obj.currentStyle[name];
}
页面样式：
<body>
<button id="btn">修改样式</button>
<button id="btn2">读取内联样式</button>
<button id="btn3">读取正在显示样式</button>
<br><br>
<div id="box1">
</div>
</body>
通过js修改元素样式：
语法：元素.style.样式名 = 样式值
注意：如果样式名含有- 要改为驼峰式写法
通过style属性设置的样式是内联样式，有较高的优先级，会立刻显示
如果给样式设置!important 则通过style不能修改样式，尽量别设置!important
<script>
window.onload = function(){
var btn = document.getElementById("btn");
var box1 = document.getElementById("box1");
btn.onclick = function(){
/*
通过js修改元素样式：
语法：元素.style.样式名 = 样式值
注意：如果样式名含有- 要改为驼峰式写法
通过style属性设置的样式是内联样式，有较高的优先级，会立刻显示
如果给样式设置!important 则通过style不能修改样式，尽量别设置!important
*/
box1.style.width = "200px";
box1.style.height = "200px";
box1.style.backgroundColor = "red";
}
}
</script>
读取样式：
语法：元素.style.样式名
通过style属性设置和读取的都是内联样式，无法读取样式表中的样式
<script>
window.onload = function(){
var box1 = document.getElementById("box1");
var btn2 = document.getElementById("btn2");
btn2.onclick = function(){
/*
读取样式：
语法：元素.style.样式名
通过style属性设置和读取的都是内联样式，无法读取样式表中的样式
*/
alert(box1.style.width);
}
}
</script>
读取正在显示样式：
语法：元素.currentStyle.样式名
如果当前没有样式，则读取默认值
currentStyle只有IE支持，其他浏览器不支持
*/
// alert(box1.currentStyle.width);
/* getComputedStyle() 奇特浏览器和IE9
改方法会返回一个对象，对象中封装了该元素的样式
可以通过对象，样式名来读取样式
如果获取样式没有设置，则会获取到真实的值，而不是默认值
<script>
window.onload = function(){
var box1 = document.getElementById("box1");
var btn3 = document.getElementById("btn3");
btn3.onclick = function(){
/*
读取正在显示样式：
语法：元素.currentStyle.样式名
如果当前没有样式，则读取默认值
currentStyle只有IE支持，其他浏览器不支持
*/
// alert(box1.currentStyle.width);
/* getComputedStyle() 奇特浏览器和IE9
改方法会返回一个对象，对象中封装了该元素的样式
可以通过对象，样式名来读取样式
如果获取样式没有设置，则会获取到真实的值，而不是默认值
*/
var obj = getComputedStyle(box1,null);
// alert(obj.width);
alert(getStyle(box1,width));
}
function getStyle(obj,name){
// window是否有这个方法
if(window.getComputedStyle){
// 正常浏览器
return getComputedStyle(obj,null)[name];
}else{
// Ie8
return obj.currentStyle[name];
}
}
}
</script>
clientWidth clientHeight 获取元素可见宽度和高度
属性不带px，返回一个数组
获取元素宽高，包括内容区和边框区
只读，不可修改
offsetWidth offsetHeight
获取元素宽高，包括内容区、边框区、内边距
offsetParent 获取当前元素定位父元素
会获取到离当前元素最近的开启定位的祖先元素
如果所有元素都没有开启定位，返回body
offsetLeft
获取当前元素相对于其定位父元素的水平偏移量
offsetTop
获取当前元素相对于其定位父元素的垂直偏移量
scrollWidth scrollHeight 获取元素滚动区域宽高
scrollTop scrollLeft 获取滚动条滚动的距离
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>其他样式操作的属性</title>
<style>
#box1{
width: 100px;
height: 100px;
background-color: rebeccapurple;
padding: 10px;
border: 10px solid red;
}
#box2{
padding: 30px;
background-color: green;
}
#box4{
width: 200px;
height: 300px;
background-color: green;
/* hidden 被裁剪 auto 出现滚动条 */
overflow: auto;
}
#box5{
width: 150px;
height: 600px;
background-color: yellow;
}
</style>
<script>
window.onload = function(){
var btn = document.getElementById("btn");
var box1 = document.getElementById("box1");
var box4 = document.getElementById("box4");
btn.onclick = function(){
/*
clientWidth clientHeight 获取元素可见宽度和高度
属性不带px，返回一个数组
获取元素宽高，包括内容区和边框区
只读，不可修改
*/
// alert(box1.clientWidth);//120
/*
offsetWidth offsetHeight
获取元素宽高，包括内容区、边框区、内边距
*/
// alert(box1.offsetWidth);//140
/*
offsetParent 获取当前元素定位父元素
会获取到离当前元素最近的开启定位的祖先元素
如果所有元素都没有开启定位，返回body
*/
var op = box1.offsetParent;
// alert(op.id);
/*
offsetLeft
获取当前元素相对于其定位父元素的水平偏移量
offsetTop
获取当前元素相对于其定位父元素的垂直偏移量
*/
// alert(op.offsetLeft);
/*
scrollWidth scrollHeight 获取元素滚动区域宽高
*/
// alert(box4.scrollHeight);
/*
scrollTop scrollLeft 获取滚动条滚动的距离
*/
// alert(box4.scrollTop);
alert(box4.clientHeight);//283
// box4.clientHeight == box4.scrollHeight - box4.scrollTo时，说明滚动条滚动到底了
alert(box4.scrollHeight - box4.scrollTop);
}
var btn2 = document.getElementById("btn2");
btn2.onclick = function(){
}
var btn3 = document.getElementById("btn3");
btn3.onclick = function(){
}
}
</script>
</head>
<body>
<button id="btn">修改样式</button>
<button id="btn2">读取内联样式</button>
<button id="btn3">读取正在显示样式</button>
<br><br>
<div id="box4">
<div id="box5"></div>
</div>
<br>
<div id="box3" style="position: relative;">
<div id="box2" style="position: relative;">
<div id="box1"></div>
</div>
</div>
</body>
</html>
