获取一个没有“ px;”后缀的样式值的数字

我试图对 HTML 元素的位置做一些比较逻辑。我有一个系统，我认为应该工作，但有一个问题。

在我的代码中，我使用不等式语句(>和 <)比较一个绝对定位元素的当前左值和顶值与另一个绝对定位元素的当前左值和顶值(它们可能在移动)。问题是我从 document.getElementById(nameVar).style.left得到的反馈是字符串形式的(例如 200px)而不是数字形式的(例如 200) ，所以比较不起作用。

我的问题是，有没有什么方法可以把字符串变成一个数字我可以用我想要的方式操纵它？要么使用一个改变的地址，要么一旦我得到反馈，就预先制定一些程序。

任何帮助都可以。

63340 次浏览
小开
最佳答案

parseInt给出了数值:

var tmp = parseInt(document.getElementById(nameVar).style.left, 10);
console.log(tmp);

或者，像@PeteWilson 在评论中建议的那样，使用 parseFloat

小开

与 你好的方法相比，另一种方法是:

var numericValue = window
.getComputedStyle(document.getElementById('div'),null)
.getPropertyValue('left')
.match(/\d+/);

JS 小提琴演示。

这种方法的好处是，它能够检索 CSS 中设置的值，而不管这个值是在元素的 style属性中设置的，还是在链接样式表中设置的，这是我 好好想想 你好的方法受到的限制。

参考文献:

小开

您可以使用 .offsetLeft和 .offsetTop来获得没有 px的值，返回类型是数字的。

演示: http://jsfiddle.net/ThinkingStiff/2sbvL/

剧本:

var result = document.getElementById( 'result' ),
position = document.getElementById( 'position' );


result.textContent = position.offsetLeft + ', ' + position.offsetTop;

HTML:

<div id="position"></div>
<div id="result"></div>

CSS:

#position {
border: 1px solid black;
height: 50px;
left: 50px;
position: absolute;
top: 50px;
width: 50px;
}

产出:

enter image description here

小开

你亦可使用:

element.getBoundingClientRect()

它返回 DOMRect 对象(带有一些有用的坐标)。

小开

刚用 TypeScript 解决了这个问题:

const parseCSSNumericValue = (value: string, unit: string): number | undefined => {
const match = value.match(new RegExp(`(-?\\d+)${unit}`))
if (!match) return
const [, g1] = match
return Number(g1)
}

你必须提供一个像‘10px’这样的值和一个你想要捕捉的单位，像‘ px’。

const [x] = getComputedStyle(element).backgroundPosition.split(' ')
const pixels = parseCSSNumericValue(x, 'px')

这是因为你不想得到 10时，你想解析像素，但有一个 '10%'。


提交答案