javascript - 使用纯 javascript 从 div 获取边框宽度

Question

我将此样式应用于 div

div#content {
border: 1px solid skyblue;  
}

我希望能够提醒边框的宽度，我已经尝试过：

window.alert( document.getElementById( "content" ).style.borderWidth );

我听说这取决于浏览器也许你可以帮助我我正在使用 Firefox 18

Answer 1

请尝试以下javascript：

alert($("#content").css("border-left-width")); //using jquery.

或者

alert(getComputedStyle(document.getElementById('content'),null).getPropertyValue('border-left-width'));//without jquery.

getComputedStyle（元素，伪）

element：获取样式的元素

伪：伪选择器，如 'hover' 或 null 如果不需要。

参考链接：http: //javascript.info/tutorial/styles-and-classes-getcomputedstyle

Answer 2

我可能为时已晚，但由于您从未将其标记为已回答，因此我想我可以尝试一下。

如果您的问题是浏览器之间的兼容性，我将创建一个自定义方法，我可以在几乎所有浏览器中使用它（这意味着要回到最基本的问题）。

我实际上挖了很多东西来做到这一点。我使用 jQuery 中的一些代码，因为我不想使用 jQuery，但仍然具有 jQuery 的向后兼容性。

此功能解决了您的问题，底部有一些关于如何使用它的示例。

此函数通过立即函数使用“模块模式”，该函数将在脚本加载后立即运行，创建一个不会污染全局范围但通过函数扩展其功能以执行您想要的操作的方法。

// I give it a name but it can also be anonymous
(function preloadedFunctions(){
    // Preseted methods.
    if(window.getComputedStyle){
        window.getComputedStylePropertyValue = function(element, prop){
            var computedStyle = window.getComputedStyle(element, null);
            if(!computedStyle) return null;
            if(computedStyle.getPropertyValue) {
                return computedStyle.getPropertyValue(prop);
            } else if (computedStyle.getAttribute) {
                return computedStyle.getAttribute(prop);
            } else if(computedStyle[prop]) {
                return computedStyle[prop];
            };
        };
    }
    // jQuery JavaScript Library v1.9.0
    // http://www.minhacienda.gov.co/portal/pls/portal/PORTAL.wwsbr_imt_services.GenericView?p_docname=6240612.JS&p_type=DOC&p_viewservice=VAHWSTH&p_searchstring=
    // For IE8 or less
    else if ( document.documentElement.currentStyle ) {
        var rnumnonpx = new RegExp( "^(" + core_pnum + ")(?!px)[a-z%]+$", "i" ),
        rposition = /^(top|right|bottom|left)$/,
        core_pnum = /[+-]?(?:\d*\.|)\d+(?:[eE][+-]?\d+|)/.source;
        window.getComputedStylePropertyValue = function(element, prop){
            var left, rsLeft,
            ret = element.currentStyle && element.currentStyle[ prop ],
            style = element.style;

            if ( ret == null && style && style[ prop ] ) {
                ret = style[ prop ];
            }
            if ( rnumnonpx.test( ret ) && !rposition.test( prop ) ) {
                left = style.left;
                rsLeft = element.runtimeStyle && element.runtimeStyle.left;
                if ( rsLeft ) {
                    element.runtimeStyle.left = element.currentStyle.left;
                }
                style.left = prop === "fontSize" ? "1em" : ret;
                ret = style.pixelLeft + "px";
                style.left = left;
                if ( rsLeft ) {
                    element.runtimeStyle.left = rsLeft;
                }
            }
            return ret === "" ? "auto" : ret;
        };
    };
})();

IE

1.-

var borderWidth = getComputedStylePropertyValue(document.getElementsByTagName("div")[0], "border-width");
console.log(borderWidth);

2.-

var div = document.getElementById("someID");
console.log(getComputedStylePropertyValue(div, "border-width")); 

Answer 3

如果有人还在寻找，这似乎是使用纯 JS 实现它的最简单方法。

let border = 
+getComputedStyle((document.getElementById("idOfYourElement")))
.borderTopWidth.slice(0, -2)

下面的解释：
document.getElementById("idOfYourElement")- 返回我们的 HTML 元素。

getComputedStyle- 将所选元素的 css 属性作为对象返回。

.borderTopWidth- 对象的相应属性getComputedStyle（返回数组，如下所示：）("10px")。

.slice(0, -2)- 从我们的数组中删除最后 2 个字符，以便我们在最后摆脱 px。

在+开始时 - 将包含我们想要的数字的字符串的其余部分解析为整数。

Answer 4

你可以试试这个

var border =  document.getElementById("yourDiv").clientWidth - document.getElementById("yourDiv").offsetWidth; 
alert(border);

Answer 5

Very old question, but anyway...

This solution is plain JavaScript, and should work in older browsers too. It measures the size of the element, with, and without borders.

The following example should work correctly if the borders around the element are all the same size. If not, the procedure doesn't change much, you just have to set the borders equal to zero, one by one.

var ele=document.getElementById("content");
// measures the element width, WITH borders
var w=ele.offsetWidth;
var cssBackup=ele.style.cssText;
// sets the borders to zero
ele.style.border="0px";
// computes the border size
var bord=(w-ele.offsetWidth)/2;
// resets the css
ele.style.cssText=cssBackup;
alert(bord);

Answer 6

当左右边框宽度相同时：

function getWidth(div) {
   return (div.offsetWidth - div.clientWidth) /2
}
getWidth(document.querySelector('#content'))

Answer 7

根据W3Schools的说法，主要浏览器都支持此属性。因此，您在使用它时应该没有任何困难。

但是，使用像 jQuery 这样的 JavaScript 框架总是可以帮助您不必担心这样的琐碎问题。

Answer 8

为我工作

let content = document.querySelector('#content');

// here 'borderWidth' is similar to element.style syntax
let contentBorderWidth = getComputedStyle(content).borderWidth; // 1px

// number, without 'px'
let contentBorderWidthNumber = parseFloat(getComputedStyle(content).borderWidth); // 1

// demo
content.innerHTML = contentBorderWidth +', '+ contentBorderWidthNumber;

// in your case, to alert 
window.alert(contentBorderWidth +', '+ contentBorderWidthNumber);

div#content {
  border: 1px solid skyblue;  
}

<div id="content"></div>

更多关于getComputedStyle。