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）

element：获取

样式的元素

pseudo：像'hover'这样的伪选择器，如果不需要则为null。

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

Answer 2

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

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

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

此功能可以解决您的问题，在底部有一些如何使用它的示例。

这个函数使用“模块模式”通过立即函数运行，一旦脚本加载创建一个不会对全局范围进行规范但通过函数扩展其功能以执行所需操作的方法，它将立即运行。 p>

// 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 3

很老的问题，但无论如何......

此解决方案是纯JavaScript ，也适用于旧版浏览器。它测量元素的大小，用，用边框。

如果元素周围的边框大小相同，则以下示例应该可以正常工作。如果没有，程序不会有太大变化，你只需要将边框设置为零，一个接一个。

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 4

如果有人还在寻找，这似乎是使用普通JS来做这件事的最简单方法。

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

以下说明：
document.getElementById("idOfYourElement") - 返回我们的HTML元素。

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

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

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

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

Answer 5

你可以试试这个

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

Answer 6

根据W3Schools，主要浏览器支持此属性。因此，使用它不会有任何困难。

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

Answer 7

当左右边框宽度相同时：

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

使用普通的javascript从div获取边框宽度

7 个答案: