请问js里面，什么返回值需要加px

Question

event.clientX ，scrollTop，offsetLeft 他们需要加px的吗？

Answer 1

看规范

event.clientX ，scrollTop，offsetLeft

首先第一个 event.clientX，这个是不需要加 px 的，因为这个应该是滚动的时候触发的事件，event 应该是一个 MouseEvent。

查看规范: https://w3c.github.io/uievent...

[Constructor(DOMString type, optional MouseEventInit eventInitDict), Exposed=Window]
interface MouseEvent : UIEvent {
  readonly attribute long screenX;
  readonly attribute long screenY;
  readonly attribute long clientX;
  readonly attribute long clientY;

  readonly attribute boolean ctrlKey;
  readonly attribute boolean shiftKey;
  readonly attribute boolean altKey;
  readonly attribute boolean metaKey;

  readonly attribute short button;
  readonly attribute unsigned short buttons;

  readonly attribute EventTarget? relatedTarget;

  boolean getModifierState(DOMString keyArg);
};

clientX 是一个 long 类型的属性，是个整数。

---

再看 scrollTop。元素的类型都是 HTMLElement，但是 scrollTop 属性是直接继承自 Element 的，那么查一下 Element 的文档。在 MDN 看吧，还是中文的：Element.scrollTop，中文写的也不太详细。

还得看规范：https://drafts.csswg.org/csso...

partial interface Element {
  DOMRectList getClientRects();
  [NewObject] DOMRect getBoundingClientRect();
  void scrollIntoView(optional (boolean or ScrollIntoViewOptions) arg);
  void scroll(optional ScrollToOptions options);
  void scroll(unrestricted double x, unrestricted double y);
  void scrollTo(optional ScrollToOptions options);
  void scrollTo(unrestricted double x, unrestricted double y);
  void scrollBy(optional ScrollToOptions options);
  void scrollBy(unrestricted double x, unrestricted double y);
  attribute unrestricted double scrollTop;    <-------- 这里
  attribute unrestricted double scrollLeft;
  readonly attribute long scrollWidth;
  readonly attribute long scrollHeight;
  readonly attribute long clientTop;
  readonly attribute long clientLeft;
  readonly attribute long clientWidth;
  readonly attribute long clientHeight;
};

scrollTop 的类型是 double。

---

平时使用 px 最多的地方就是样式表。我们看一下样式的定义。

HTMLElement.style 的类型是一个 CSSStyleDeclaration：https://drafts.csswg.org/csso...

[Exposed=Window]
interface CSSStyleDeclaration {
  [CEReactions] attribute CSSOMString cssText;
  readonly attribute unsigned long length;
  getter CSSOMString item(unsigned long index);
  CSSOMString getPropertyValue(CSSOMString property);  <----- 这里
  CSSOMString getPropertyPriority(CSSOMString property);
  [CEReactions] void setProperty(CSSOMString property, [TreatNullAs=EmptyString] CSSOMString value, [TreatNullAs=EmptyString] optional CSSOMString priority = "");
  [CEReactions] void setPropertyValue(CSSOMString property, [TreatNullAs=EmptyString] CSSOMString value);
  [CEReactions] void setPropertyPriority(CSSOMString property, [TreatNullAs=EmptyString] CSSOMString priority);
  [CEReactions] CSSOMString removeProperty(CSSOMString property);
  readonly attribute CSSRule? parentRule;
  [CEReactions] attribute [TreatNullAs=EmptyString] CSSOMString cssFloat;
};

是 string（字符串）类型的，所以需要加 px。

Answer 2

他们的单位是有px的就需要加px。0px,可以省略px。

Answer 3

像元素的位置和尺寸都是以像素来衡量的，像素px是相对于显示器屏幕分辨率而言的，一般都要加px。

Answer 4

我觉的还可以这么想、什么情况下可以不加单位、
当元素需要操作且不等于0的情况就得加上相应的单位

Answer 5

你说的这几个都要加

Answer 6

默认单位就是px