使用普通的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:获取样式的元素

pseudo:伪选择器,如'hover',如果不需要则为null.

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

Answer 2

如果有人仍在寻找，这似乎是使用普通 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 3

你可以试试这个：

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

请注意，该值将四舍五入为整数。如果需要小数值，则需要使用getComputedStyle（参见其他答案）。

Answer 4

我可能为时已晚,但由于你从未将其标记为已回答,我想我可以尝试一下.

如果您的问题是浏览器之间的兼容性,我会创建一个自定义方法,我几乎可以在每个浏览器中使用(这意味着回到基础).

我实际上挖了很多东西.我使用了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;
        };
    };
})();

即

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 5

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

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