# 二、jQuery 与元素尺寸

# 1、内容

// 1、原生js
console.log(getComputedStyle(box).width)
console.log(getComputedStyle(box).height)

// 2、jQuery方式
console.log($('#box').width())
console.log($('#box').height())

# 2、内容 + padding

// 1、原生js
console.log(getComputedStyle(box).width)
console.log(getComputedStyle(box).height)

// 2、jQuery方式
console.log($('#box').innerWidth())
console.log($('#box').innerHeight())

# 三、jQuery 与元素位置

# 1、内容 + padding + border

// 1、原生js
console.log(box.offsetWidth)
console.log(box.offsetHeight)

// 2、jQuery方式
console.log($('#box').outerWidth())
console.log($('#box').outerHeight())
  • 拓展:内容 + padding + border + margin
console.log($('#box').outerWidth(true))
console.log($('#box').outerHeight(true))

# 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()) // 距离定义元素的左上角距离

# 三、jQuery 拓展

  除了前面的 jQuery 知识点,大家还可以去学习了解一下 jQuery 的 ajax、jQuery 插件、jQuery 扩展机制、swiper、Bootstrap 等相关知识点。

更新于 : 7/8/2024, 10:21:14 AM