-
JS中的元素样式
元素样式
1.操作内联样式
修改内联样式：
通过
JS修改元素的样式语法：
元素.style.样式名 = 样式值;注意是：如果
CSS的样式名中有- 这种情况下需要使用
驼峰命名法，去掉-，然后将-后的字母修改成大写但是如果在样式中写
!important，则此时样式会有最高的优先级，即使通过JS也不能覆盖该样式，此时将会导致JS样式失败，所以尽量不要为样式添加!important读取内联样式：
语法：
元素.style.样式名;通过
style属性设置和读取的都是内联样式，无法读取样式表中的样式<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>内联样式</title> <style> #box { width: 200px; height: 100px; background-color: #99ff99; } </style> </head> <body> <div id="box"></div> <button id="but">点我</button> <button id="but2">再点我试试</button> <script type="text/javascript"> /** * 设置内联样式 * @type {HTMLElement} */ // 第一步：获取but对象和#box对象 var but = document.getElementById("but"); var box = document.getElementById("box"); var but2 = document.getElementById("but2"); but.onclick = function () { // 第二步：修改内联样式 box.style.width = "430px"; box.style.height = "430px"; box.style.backgroundColor = "green"; }; /** * 读取内联样式 */ but2.onclick = function () { alert(box.style.backgroundColor); }; </script> </body> </html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
2.获取元素的样式
注意是：由于
style只能读取内联的样式，所以在操作时不方便currentStyle.属性名方式获取当前的属性值：和getComputedStyle("需要获取属性对象",null)方法一样都是只能获取属性值，不能修改属性值/* * 获取元素的当前显示的样式 * 语法：元素.currentStyle.样式名 * 它可以用来读取当前元素正在显示的样式 * 如果当前元素没有设置该样式，则获取它的默认值 * * **currentStyle只有IE浏览器支持，其他的浏览器都不支持** */- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
一般情况下，都使用
getComputedStyle("需要获取属性对象",null);，但是该方法不支持IE/* * 在其他浏览器中可以使用 * getComputedStyle()这个方法来获取元素当前的样式 * 这个方法是window的方法，可以直接使用 * 需要两个参数 * 第一个：要获取样式的元素 * 第二个：可以传递一个伪元素，一般都传null * * 该方法会返回一个对象，对象中封装了当前元素对应的样式 * 可以通过对象.样式名来读取样式 * 如果获取的样式没有设置，则会获取到真实的值，而不是默认值 * 比如：没有设置width，它不会获取到auto，而是一个长度 * * 但是该方法不支持IE8及以下的浏览器 * * 通过currentStyle和getComputedStyle()读取到的样式都是只读的， * 不能修改，如果要修改必须通过style属性 */ //var obj = getComputedStyle(box1,null); /*alert(getComputedStyle(box1,null).width);*/ //正常浏览器的方式 //alert(getComputedStyle(box1,null).backgroundColor); //IE8的方式 //alert(box1.currentStyle.backgroundColor); //alert(getStyle(box1,"width"));- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width: 100px; height: 100px; background-color: yellow; } </style> <script type="text/javascript"> window.onload = function(){ //点击按钮以后读取box1的样式 var box1 = document.getElementById("box1"); var btn01 = document.getElementById("btn01"); btn01.onclick = function(){ //读取box1的宽度 //alert(box1.style.width); /* * 获取元素的当前显示的样式 * 语法：元素.currentStyle.样式名 * 它可以用来读取当前元素正在显示的样式 * 如果当前元素没有设置该样式，则获取它的默认值 * * currentStyle只有IE浏览器支持，其他的浏览器都不支持 */ //alert(box1.currentStyle.width); //box1.currentStyle.width = "200px"; //alert(box1.currentStyle.backgroundColor); /* * 在其他浏览器中可以使用 * getComputedStyle()这个方法来获取元素当前的样式 * 这个方法是window的方法，可以直接使用 * 需要两个参数 * 第一个：要获取样式的元素 * 第二个：可以传递一个伪元素，一般都传null * * 该方法会返回一个对象，对象中封装了当前元素对应的样式 * 可以通过对象.样式名来读取样式 * 如果获取的样式没有设置，则会获取到真实的值，而不是默认值 * 比如：没有设置width，它不会获取到auto，而是一个长度 * * 但是该方法不支持IE8及以下的浏览器 * * 通过currentStyle和getComputedStyle()读取到的样式都是只读的， * 不能修改，如果要修改必须通过style属性 */ //var obj = getComputedStyle(box1,null); /*alert(getComputedStyle(box1,null).width);*/ //正常浏览器的方式 //alert(getComputedStyle(box1,null).backgroundColor); //IE8的方式 //alert(box1.currentStyle.backgroundColor); //alert(getStyle(box1,"width")); var w = getStyle(box1,"width"); alert(w); }; }; /* * 定义一个函数，用来获取指定元素的当前的样式 * 参数： * obj 要获取样式的元素 * name 要获取的样式名 */ function getStyle(obj , name){ 注意是：一定要使用`window.属性名`的方式，否则会报错，因为是：`getComputedStyle`是`window`中的属性，如果在`IE8`中没有该属性返回是`undefined`，`undefined`转换成`boolean`是`false`，如果不使用`window.属性名`,直接使用`getComputedStyle`表示是在全局中获取，如果全局中没有该属性直接报错 if(window.getComputedStyle){ //正常浏览器的方式，具有getComputedStyle()方法 return getComputedStyle(obj , null)[name]; }else{ //IE8的方式，没有getComputedStyle()方法 return obj.currentStyle[name]; } //return window.getComputedStyle?getComputedStyle(obj , null)[name]:obj.currentStyle[name]; } </script> </head> <body> <button id="btn01">点我一下</button> <br /><br /> <div id="box1" ></div> </body> </html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
注意是：一定要使用`window.属性名`的方式，否则会报错，因为是：`getComputedStyle`是`window`中的属性，如果在`IE8`中没有该属性返回是`undefined`，`undefined`转换成`boolean`是`false`，如果不使用`window.属性名`,直接使用`getComputedStyle`表示是在全局中获取，如果全局中没有该属性直接报错- 1
3.其他样式相关的属性【非常重要】
属性或方法 描述 clientWidth获取元素的可见高度，返回值不带 px的，可以直接计算，会获取元素宽度和内容区和内边距，不包括边框clientHeight获取元素的可见高度，返回值不带 px的，可以直接计算，会获取元素宽度和内容区和内边距，不包括边框offsetWidth获取元素的整个的宽度，包括内容区，内边距和边框 offsetHeigth获取元素的整个的高度，包括内容区，内边距和边框 offsetParent可以用来获取当前元素的定位父元素，会获取到离当前元素最近的开启了定位的祖先元素，如果所有的祖先元素都没有开启定位，则返回 body获取父元素定位offsetLeft当前元素相对于其定位父元素的水平偏移量 offsetTop当前元素相对于其定位父元素的垂直偏移量 scrollWidth可以获取元素整个滚动区域的宽度 scrollHeight可以获取元素整个滚动区域的高度 scrollLeft可以获取水平滚动条滚动的距离 scrollTop可以获取垂直滚动条滚动的距离 //当满足scrollHeight - scrollTop == clientHeight //说明垂直滚动条滚动到底了 //当满足scrollWidth - scrollLeft == clientWidth //说明水平滚动条滚动到底 //alert(box4.scrollHeight - box4.scrollTop); // 600- 1
- 2
- 3
- 4
- 5
- 6
- 7
1<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width: 100px; height: 100px; background-color: red; padding: 10px; border: 10px solid yellow; } #box2{ padding: 100px; background-color: #bfa; } #box4{ width: 200px; height: 300px; background-color: #bfa; overflow: auto; } #box5{ width: 450px; height: 600px; background-color: yellow; } </style> <script type="text/javascript"> window.onload = function(){ var box1 = document.getElementById("box1"); var btn01 = document.getElementById("btn01"); var box4 = document.getElementById("box4"); btn01.onclick = function(){ /* * clientWidth * clientHeight * - 这两个属性可以获取元素的可见宽度和高度 * - 这些属性都是不带px的，返回都是一个数字，可以直接进行计算 * - 会获取元素宽度和高度，包括内容区和内边距 * - 这些属性都是只读的，不能修改 */ //alert(box1.clientWidth); //alert(box1.clientHeight); //box1.clientHeight = 300; /* * offsetWidth * offsetHeight * - 获取元素的整个的宽度和高度，包括内容区、内边距和边框 */ //alert(box1.offsetWidth); /* * offsetParent * - 可以用来获取当前元素的定位父元素 * - 会获取到离当前元素最近的开启了定位的祖先元素 * 如果所有的祖先元素都没有开启定位，则返回body */ var op = box1.offsetParent; //alert(op.id); /* * offsetLeft * - 当前元素相对于其定位父元素的水平偏移量 * offsetTop * - 当前元素相对于其定位父元素的垂直偏移量 */ //alert(box1.offsetLeft); /* * scrollWidth * scrollHeight * - 可以获取元素整个滚动区域的宽度和高度 */ //alert(box4.clientHeight); //alert(box4.scrollWidth); /* * scrollLeft * - 可以获取水平滚动条滚动的距离 * scrollTop * - 可以获取垂直滚动条滚动的距离 */ //alert(box4.scrollLeft); //alert(box4.scrollTop); //alert(box4.clientHeight); // 283 //当满足scrollHeight - scrollTop == clientHeight //说明垂直滚动条滚动到底了 //当满足scrollWidth - scrollLeft == clientWidth //说明水平滚动条滚动到底 //alert(box4.scrollHeight - box4.scrollTop); // 600 }; }; </script> </head> <body id="body"> <button id="btn01">点我一下</button> <br /><br /> <div id="box4"> <div id="box5"></div> </div> <br /><br /> <div id="box3"> <div id="box2" style="position: relative;"> <div id="box1"></div> </div> </div> </body> </html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #info{ width: 300px; height: 500px; background-color: #bfa; overflow: auto; } </style> <script type="text/javascript"> window.onload = function(){ /* * 当垂直滚动条滚动到底时使表单项可用 * onscroll * - 该事件会在元素的滚动条滚动时触发 */ //获取id为info的p元素 var info = document.getElementById("info"); //获取两个表单项 var inputs = document.getElementsByTagName("input"); //为info绑定一个滚动条滚动的事件 info.onscroll = function(){ //检查垂直滚动条是否滚动到底 if(info.scrollHeight - info.scrollTop == info.clientHeight){ //滚动条滚动到底，使表单项可用 /* * disabled属性可以设置一个元素是否禁用， * 如果设置为true，则元素禁用 * 如果设置为false，则元素可用 */ inputs[0].disabled = false; inputs[1].disabled = false; } }; }; </script> </head> <body> <h3>欢迎亲爱的用户注册</h3> <p id="info"> ... 亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册 </p> <!-- 如果为表单项添加disabled="disabled" 则表单项将变成不可用的状态 --> <input type="checkbox" disabled="disabled" />我已仔细阅读协议，一定遵守 <input type="submit" value="注册" disabled="disabled" /> </body> </html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
-
相关阅读:
C++算法 —— 动态规划（9）完全背包问题
使用robot+selenium创建一个UI自动化测试用例
图的存储之邻接矩阵
【HDFS】JN回滚大量edit日志导致Namenode主备切换的故障记录
STM8 调试总结
多元回归分析 | RF随机森林多输入单输出预测（Matlab完整程序）
[附源码]java毕业设计研究生管理系统
【OS基础】符合AUTOSAR标准的RTAOS-Alarms详解
【类和对象+this引用】
治愈系书单|林曦《只生欢喜不生愁》
- 原文地址：https://blog.csdn.net/weixin_47267628/article/details/126860657
