offset 和 style的区别
offset
offset可以得到任意样式表中的样式值
offset获得的数值是没有单位的
offsetWidth包含padding+border+width
offsetWidth是只读属性,不能获取不能赋值
style
style只能得到行内样式表中的样式值
style.width获得的是带有单位的字符串
style.width获得不包含padding和border的值
style.width是可读写属性,可以获取也可以赋值
注:想要获取元素大小位置,用offset更合适 想要给元素更改值,用style改变
<!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>offset与style的区别</title> <style> .box{ width: 200px; height: 200px; background-color: pink; } </style> </head> <body> <div class="box" style="width: 200px;"></div> <script> // offset与style的区别 var box = document.querySelector('.box') console.log(box.offsetWidth); //输出200 console.log(box.style.width); //输出200px // box.offsetWidth = '300px' //不能改变 只读 box.style.width = '300px' </script> </body> </html>
不积跬步无以至千里 不积小流无以成江海
