26

このスタイルをdivに適用しました

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

境界線の幅を警告できるようにしたいので、これを試しました：

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

Firefox 18 を使用しています

4

8 に答える 8

26

以下の 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

于 2013-02-04T05:48:46.870 に答える
6

手遅れかもしれませんが、あなたが回答済みとしてマークしなかったので、試してみようと思いました.

問題がブラウザ間の互換性である場合、ほとんどすべてのブラウザで使用できるカスタム メソッドを作成します (つまり、基本に戻ることを意味します)。

私は実際にこれを行うために多くのことを掘りました。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"));
于 2014-01-20T05:31:58.890 に答える
2

非常に古い質問ですが、とにかく...

このソリューションは単純な JavaScriptであり、古いブラウザーでも動作するはずです。要素のサイズを、枠あり、枠なしで測定します。

次の例は、要素の周囲の境界線がすべて同じサイズである場合に正しく機能するはずです。そうでない場合、手順はあまり変わりません。境界線を 1 つずつゼロに設定するだけです。

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);
于 2014-08-28T06:03:16.177 に答える
0

W3Schoolsによると、このプロパティは主要なブラウザーでサポートされています。したがって、使用に問題はないはずです。

ただし、jQuery のような JavaScript フレームワークを使用すると、このような些細な問題を心配する必要がなくなります。

于 2013-02-04T05:46:50.373 に答える