在 Javascript 中将 1 添加到 css 样式属性

Posted 2023-03-13

【中文标题】在 Javascript 中将 1 添加到 css 样式属性

【英文标题】：Adding 1 to a css style property in Javascript

【发布时间】：2019-01-29 21:23:57

【问题描述】：

我试图首先获取元素的 order 属性的值，然后在单击按钮时将其加 1。问题是，我得到 11，而不是得到 1 并加 1 和得到 2。“+=”运算符不应该添加值吗？我做错了什么？

carouselPrev.addEventListener("click", function()

  const firstPost = document.querySelector(".blog-post");

  let firstPostOrder = firstPost.style.getPropertyValue('order');

  firstPost.style.order = firstPostOrder += 1;
);

【问题讨论】：

在进行算术运算之前，您需要使用parseInt() 将firstPostOrder 视为整数。否则，您只是将1 附加到一个字符串。

【参考方案1】：

Css 属性是字符串，'1' + 1 = 11.

在firstPostOrder 之前添加“+”以将其转换为数字。

firstPost.style.order = +firstPostOrder += 1;

【讨论】：

这确实有效，谢谢。在允许的情况下接受。

【参考方案2】：

这些值是字符串，因此它们被连接起来，在使用 parseInt() 之前尝试解析为整数

【参考方案3】：

试试这个

carouselPrev.addEventListener("click", function()

const firstPost = document.querySelector(".blog-post");

let firstPostOrder = firstPost.style.getPropertyValue('order');

firstPost.style.order = parseInt(firstPostOrder,10) +1;
);

【讨论】：

总是建议radix 和parseInt 即parseInt(firstPostOrder, 10) 见***.com/questions/6611824/why-do-we-need-to-use-radix

那是行不通的。顺序完全没有变化。

【参考方案4】：

不，“+=”运算符是您可以用来代替“=”的赋值运算符。

let x = 42;
x += 1;

等价于

let x = 42;
x = x + 1;

您只想使用“+”来添加值，而不是“+=”。