[英]How to get margin value of a div in plain JavaScript?
I can get height in jQuery with我可以在 jQuery 中获得高度
$(item).outerHeight(true);
but how do I with JS?但是我如何使用 JS?
I can get the height of the li with我可以得到 li 的高度
document.getElementById(item).offsetHeight
but i will always get "" when I try margin-top:但是当我尝试 margin-top 时,我总是会得到“”:
document.getElementById(item).style.marginTop
The properties on the style
object are only the styles applied directly to the element (eg, via a style
attribute or in code). style
对象上的属性只是直接应用于元素的样式(例如,通过style
属性或在代码中)。 So .style.marginTop
will only have something in it if you have something specifically assigned to that element (not assigned via a style sheet, etc.).所以
.style.marginTop
只有当你有一些东西专门分配给那个元素时才会有一些东西(不是通过样式表等分配的)。
To get the current calculated style of the object, you use either the currentStyle
property (Microsoft) or the getComputedStyle
function (pretty much everyone else).要获取对象的当前计算样式,您可以使用
currentStyle
属性 (Microsoft) 或getComputedStyle
函数(几乎所有其他人)。
Example:例子:
var p = document.getElementById("target");
var style = p.currentStyle || window.getComputedStyle(p);
display("Current marginTop: " + style.marginTop);
Fair warning: What you get back may not be in pixels.公平警告:您返回的内容可能不是以像素为单位的。 For instance, if I run the above on a
p
element in IE9, I get back "1em"
.例如,如果我在 IE9 中的
p
元素上运行上述内容,我会返回"1em"
。
Also, you can create your own outerHeight
for HTML elements.此外,您可以为 HTML 元素创建自己的
outerHeight
。 I don't know if it works in IE, but it works in Chrome.我不知道它是否适用于 IE,但它适用于 Chrome。 Perhaps, you can enhance the code below using
currentStyle
, suggested in the answer above.也许,您可以使用上面答案中建议的
currentStyle
增强下面的代码。
Object.defineProperty(Element.prototype, 'outerHeight', {
'get': function(){
var height = this.clientHeight;
var computedStyle = window.getComputedStyle(this);
height += parseInt(computedStyle.marginTop, 10);
height += parseInt(computedStyle.marginBottom, 10);
height += parseInt(computedStyle.borderTopWidth, 10);
height += parseInt(computedStyle.borderBottomWidth, 10);
return height;
}
});
This piece of code allow you to do something like this:这段代码允许你做这样的事情:
document.getElementById('foo').outerHeight
According to caniuse.com, getComputedStyle is supported by main browsers (IE, Chrome, Firefox).根据caniuse.com,主要浏览器(IE、Chrome、Firefox)都支持getComputedStyle 。
I found something very useful on this site when I was searching for an answer on this question.当我在这个问题上寻找答案时,我在这个网站上发现了一些非常有用的东西。 You can check it out at http://www.codingforums.com/javascript-programming/230503-how-get-margin-left-value.html .
您可以在http://www.codingforums.com/javascript-programming/230503-how-get-margin-left-value.html 上查看。 The part that helped me was the following:
帮助我的部分如下:
/*** * get live runtime value of an element's css style * http://robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element * note: "styleName" is in CSS form (ie 'font-size', not 'fontSize'). ***/ var getStyle = function(e, styleName) { var styleValue = ""; if (document.defaultView && document.defaultView.getComputedStyle) { styleValue = document.defaultView.getComputedStyle(e, "").getPropertyValue(styleName); } else if (e.currentStyle) { styleName = styleName.replace(/\\-(\\w)/g, function(strMatch, p1) { return p1.toUpperCase(); }); styleValue = e.currentStyle[styleName]; } return styleValue; } //////////////////////////////////// var e = document.getElementById('yourElement'); var marLeft = getStyle(e, 'margin-left'); console.log(marLeft); // 10px
#yourElement { margin-left: 10px; }
<div id="yourElement"></div>
Here is my solution:这是我的解决方案:
Step 1: Select the element第 1 步:选择元素
Step 2: Use getComputedStyle and provide the element to it第 2 步:使用 getComputedStyle 并为其提供元素
Step 3: Now access all the properties第 3 步:现在访问所有属性
const item = document.getElementbyId('your-element-id');
const style= getComputedStyle(item);
const itemTopmargin = style.marginTop;
console.log(itemTopmargin)
It will give you margin with px units like "16px" which you might not want.它将为您提供您可能不想要的像素单位(例如“16px”)的边距。 You can extract the value using
parseInt()
您可以使用
parseInt()
提取值
const marginTopNumber = parseInt(itemTopmargin)
console.log(marginTopNumber)
It will give you the numerical value only (without any units).它只会给你数值(没有任何单位)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.