jQuery中css()方法传无单位数值设置宽度是否默认使用px单位？

结论 #

执行$('<a>').css("width", 100)时，jQuery会自动给传入的数值100补上px单位，最终给元素写入的内联样式是width: 100px，这个处理和元素是否添加到DOM没有关系。
但要注意：<a>标签默认是行内（inline）元素，行内非替换元素本身不支持width属性设置，所以哪怕样式写了width:100px，默认状态下元素实际渲染宽度还是由内容撑开，不会真的显示为100px宽，只有把它改成块级元素（display: block）或者行内块元素（display: inline-block），设置的宽度才会生效。

原理说明 #

jQuery的.css()方法内部做了单位自动补全逻辑：

• 对需要长度单位的样式属性（比如width、height、margin、padding、定位偏移值等），如果传入的参数是纯数字类型，会自动在数值后拼接px单位再写入元素样式；
• 对本身不需要单位的数值型样式属性（比如z-index、opacity、font-weight），传入数字时不会追加任何单位，避免样式错误。

你可以直接在控制台跑下面的代码验证：

const testLink = $('<a>').css('width', 100);
// 输出元素的内联样式width值，结果为 "100px"
console.log(testLink[0].style.width);

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