JavaScript07-DOM操作CSS样式
1.DOM操作CSS样式
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#div01 {
width: 100px;
height: 100px;
background-color: tomato;
margin-top: 20px;
}
</style>
<script>
window.onload = function () {
let width = 100;
document.getElementById('btn01').onclick = function () {
// 通过元素的style属性直接修改元素的内联样式，style修改完成之后立即生效。
// style只能修改内联样式；不能修改定义在style标签中的样式。
let div01 = document.getElementById('div01');
width += 10;
div01.style.width = width + 'px';
div01.style.height = width + 'px';
// 如果样式中带有-，如background-color，就需要将-去掉，然后将-后的字母大写。
div01.style.backgroundColor = 'orange';
};
document.getElementById('btn02').onclick = function () {
let div01 = document.getElementById('div01');
// 获取元素的当前样式，getComputedStyle()会返回当前元素的所有的样式。
let currentStyle = getComputedStyle(div01);
// 通过getComputedStyle().width 获取的宽是一个字符串，100px
// 通过getComputedStyle() 获取的值都是有单位的。
console.log(currentStyle.width); // 100px
// parseInt(100px) 将100px转换为100
// 报错 Uncaught DOMException: Failed to set the 'width' property on 'CSSStyleDeclaration':
// These styles are computed, and therefore the 'width' property is read-only.
// getComputedStyle() 获取的样式是只读的不能进行修改。
//currentStyle.width = parseInt(currentStyle.width) + 10 + 'px';
div01.style.width = parseInt(currentStyle.width) + 10 + 'px';
// getComputedStyle() 的两个参数。
// 1 要获取样式的对象。
// 2 要获取样式的伪元素，可以获取到定义样式时使用 #div01:after 定义的样式，相当与获取div01的after伪元素的样式。
getComputedStyle(div01, ":after");
}
}
</script>
</head>
<body>
<button id="btn01">btn01</button>
<button id="btn02">btn02</button>
<div id="div01"></div>
</body>
</html>
2.获取CSS样式
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#div01 {
width: 100px;
height: 100px;
padding: 10px;
border: 10px silver solid;
background-color: red;
}
#div02 {
width: 100px;
height: 100px;
padding: 10px;
border: 10px silver solid;
background-color: red;
}
#div03 {
width: 100px;
height: 100px;
padding: 10px;
border: 10px silver solid;
background-color: red;
}
</style>
<script>
window.onload = function () {
document.getElementById('btn01').onclick = function () {
let div01 = document.getElementById('div01');
// clientHeight clientWidth
// 获取盒子的内部大小，包含盒子的内容区和内边距
console.log(div01.clientHeight); // 120
// offsetHeight offsetWidth
// 获取盒子可见大小，包含盒子的内容区、内边距和边框。
console.log(div01.offsetHeight); // 140
// offsetLeft 获取当前元素相当与定位元素(offsetParent)左侧偏移量
// offsetTop 获取当前元素相当与定位元素(offsetParent)上偏移量
console.log(div01.offsetLeft); // 8
console.log(div01.offsetTop); // 31
// offsetParent 获取当前元素的定位父元素
// 定位父元素是距离当前元素最近开启了定位的祖先元素。
// 如果所有的祖先元素都没有开启定位则返回body
console.log(div01.offsetParent); // body
};
document.getElementById('btn02').onclick = function () {
let div02 = document.getElementById('div02');
// div02的父div没有开启定位，所有返回的是body。
console.log(div02.offsetParent); // body
};
document.getElementById('btn03').onclick = function () {
let div03 = document.getElementById('div03');
// div03的父div开启了定位，所有offsetParent返回的是div
console.log(div03.offsetParent); // div
}
}
</script>
</head>
<body>
<button id="btn01">btn01</button>
<button id="btn02">btn02</button>
<button id="btn03">btn03</button>
<div id="div01"></div>
<div>
<div id="div02"></div>
</div>
<div style="position: relative">
<div id="div03"></div>
</div>
</body>
</html>
3.获取CSS中滚动的距离
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#div01 {
width: 100px;
height: 100px;
padding: 10px;
margin: 10px;
overflow: auto;
background-color: #99ff99;
}
#div02 {
width: 600px;
height: 600px;
}
</style>
<script>
window.onload = function () {
document.getElementById('btn01').onclick = function () {
let div01 = document.getElementById('div01');
// scrollHeight 用来获取元素滚动区域的高度
// scrollWidth 用来获取元素滚动区域的宽度
// scrollHeight，可滚动区域的高度620为div01中的div02的高度600+div01的内边距20。
console.log(div01.scrollHeight); // 620
console.log(div01.scrollWidth); // 620
console.log(div01.clientHeight); // 103
// scrollTop 垂直滚动条滚动的距离
// scrollLeft 水平滚动条滚动的距离
// 随着滚动条的滚动scrollTop和scrollLeft的距离会改变。
console.log(div01.scrollTop); // 0
console.log(div01.scrollLeft); // 0
// scrollHeight - scrollTop === clientHeight 说明滚动条滚动到底部了。
console.log(div01.scrollHeight - div01.scrollTop); //
}
}
</script>
</head>
<body>
<button id="btn01">btn01</button>
<div id="div01">
<div id="div02">div02</div>
</div>
</body>
</html>
4.滚动练习，阅读完许可协议后才能签署
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#div01 {
width: 300px;
height: 100px;
overflow: auto;
background-color: #99ff99;
}
</style>
<script>
window.onload = function () {
let div01 = document.getElementById('div01');
let inputs = document.getElementsByTagName('input');
div01.onscroll = function () {
// 当滚动到底部时，设置选择框可以选择。
if (div01.scrollHeight - div01.scrollTop === div01.clientHeight) {
for (let i = 0;i < inputs.length;i++) {
// input的disabled=true，输入框可以使用；disabled=false，输入框不能使用。
inputs[i].disabled = false;
}
}
}
};
</script>
</head>
<body>
<div id="div01">
我已经阅读了许可正面的~我已经阅读了许可正面的~我已经阅读了许可正面的~我已经阅读了许可正面的~
我已经阅读了许可正面的~我已经阅读了许可正面的~
我已经阅读了许可正面的~我已经阅读了许可正面的~
我已经阅读了许可正面的~我已经阅读了许可正面的~
我已经阅读了许可正面的~我已经阅读了许可正面的~
我已经阅读了许可正面的~我已经阅读了许可正面的~
我已经阅读了许可正面的~我已经阅读了许可正面的~
我已经阅读了许可正面的~我已经阅读了许可正面的~
我已经阅读了许可正面的~我已经阅读了许可正面的~
我已经阅读了许可正面的~我已经阅读了许可正面的~
我已经阅读了许可正面的~我已经阅读了许可正面的~
我已经阅读了许可正面的~我已经阅读了许可正面的~
我已经阅读了许可正面的~我已经阅读了许可正面的~
我已经阅读了许可正面的~我已经阅读了许可正面的~
我已经阅读了许可正面的~我已经阅读了许可正面的~
我已经阅读了许可正面的~我已经阅读了许可正面的~
我已经阅读了许可正面的~我已经阅读了许可正面的~
</div>
<input type="checkbox" disabled> 我已经阅读了许可正面的~我已经阅读了许可正面的~
<input type="submit" disabled value="注册">
</body>
</html>
浙公网安备 33010602011771号