# 二、jQuery 与元素尺寸
# 1、内容
// 1、原生js console.log(getComputedStyle(box).width) console.log(getComputedStyle(box).height) // 2、jQuery方式 console.log($('#box').width()) console.log($('#box').height())
Copied!
# 2、内容 + padding
// 1、原生js console.log(getComputedStyle(box).width) console.log(getComputedStyle(box).height) // 2、jQuery方式 console.log($('#box').innerWidth()) console.log($('#box').innerHeight())
Copied!
# 三、jQuery 与元素位置
# 1、内容 + padding + border
// 1、原生js console.log(box.offsetWidth) console.log(box.offsetHeight) // 2、jQuery方式 console.log($('#box').outerWidth()) console.log($('#box').outerHeight())
Copied!
- 拓展:内容 + padding + border + margin
console.log($('#box').outerWidth(true)) console.log($('#box').outerHeight(true))
Copied!
# 2、偏移量
// 1、原生js console.log(box.offsetLeft) console.log(box.offsetTop) // 2、jQuery方式 // 获取一个对象{left: 20, top: 20} // ① offset() console.log($('#box').offset()) // 距离文档流的左上角距离 $('#box').offset({ left: 100, top: 100 }) // ② position() console.log($('#box').position()) // 距离定义元素的左上角距离
Copied!
# 三、jQuery 拓展
除了前面的 jQuery 知识点,大家还可以去学习了解一下 jQuery 的 ajax、jQuery 插件、jQuery 扩展机制、swiper、Bootstrap 等相关知识点。
← DOM事件