jQuery的.width()、.height()及指定鼠标移动代码的JavaScript等价写法

嘿，这就帮你把jQuery的这两个方法转成原生JS，还有你那段鼠标移动的代码也一起转好！

一、.width() 和 .height() 的原生等价实现 #

jQuery的这两个方法分获取和设置两种场景，原生JS对应实现如下：

获取元素宽/高 #

jQuery的.width()/.height()（无参数）返回的是元素内容区域的尺寸（不含padding、border、margin）。原生可以通过计算得到精准值：

// 获取内容宽度
function getContentWidth(element) {
  const computedStyle = window.getComputedStyle(element);
  return parseFloat(computedStyle.width) - 
         parseFloat(computedStyle.paddingLeft) - 
         parseFloat(computedStyle.paddingRight) - 
         parseFloat(computedStyle.borderLeftWidth) - 
         parseFloat(computedStyle.borderRightWidth);
}

// 获取内容高度
function getContentHeight(element) {
  const computedStyle = window.getComputedStyle(element);
  return parseFloat(computedStyle.height) - 
         parseFloat(computedStyle.paddingTop) - 
         parseFloat(computedStyle.paddingBottom) - 
         parseFloat(computedStyle.borderTopWidth) - 
         parseFloat(computedStyle.borderBottomWidth);
}

如果你的需求不需要这么精准，原生还有几个快捷属性可以用：

• element.clientWidth/element.clientHeight：内容+padding的尺寸（不含border）
• element.offsetWidth/element.offsetHeight：内容+padding+border的尺寸（不含margin）

设置元素宽/高 #

jQuery的.width(value)/.height(value)会自动处理单位（传数字就加px），原生写法也很简单：

// 设置内容宽度
function setContentWidth(element, value) {
  element.style.width = typeof value === 'number' ? `${value}px` : value;
}

// 设置内容高度
function setContentHeight(element, value) {
  element.style.height = typeof value === 'number' ? `${value}px` : value;
}

二、你的jQuery代码的原生JavaScript等价写法 #

先贴一下你给出的原jQuery代码：

$(document).on({
mousemove: function(event) {
widget = $('.widget').last();
x = event.pageX;
y = event.pageY;
widget.width(x);
widget.height(y);
}
});

对应的原生JS写法如下（还优化了变量作用域，避免全局污染）：

// 给document绑定鼠标移动事件
document.addEventListener('mousemove', function(event) {
  // 获取所有带.widget类的元素，取最后一个
  const widgetList = document.querySelectorAll('.widget');
  const targetWidget = widgetList[widgetList.length - 1];
  
  // 获取鼠标的页面坐标，和jQuery的event.pageX/pageY一致
  const mouseX = event.pageX;
  const mouseY = event.pageY;
  
  // 确保元素存在再设置尺寸，避免报错
  if (targetWidget) {
    targetWidget.style.width = `${mouseX}px`;
    targetWidget.style.height = `${mouseY}px`;
  }
});

几个关键转换点说明：

• jQuery的$(document).on('mousemove', ...) 对应原生的document.addEventListener('mousemove', ...)
• $('.widget').last() 对应document.querySelectorAll('.widget')后取数组最后一项
• widget.width(x) 直接用targetWidget.style.width = ${mouseX}px``，手动补上px单位（jQuery会自动处理这一步）
• 新增了元素存在性判断，避免没有.widget元素时报错

内容的提问来源于stack exchange，提问作者Ronij Pandey