jquery - jQuery で境界線の幅を取得する

Question

ポップアップ要素をコンテナー内に動的に配置する必要があります。コンテナの境界線の幅を取得しようとしています。次のような質問がいくつか見つかりました。

私の問題は議論されましたが、答えは見つかりませんでした。プロパティが太い、細い、または中の場合、境界線の幅を取得するにはどうすればよいですか?

通常、thin、medium、thick はそれぞれ 2px、4px、6px であると期待できるという言葉がありますが、CSS 仕様ではそれを要求していません。

DOM 要素の一方の端にある境界線の幅を取得するための簡単な (または少なくとも一貫した方法ではないにしても) 誰かが遭遇しましたか?

score 1 · Accepted Answer

あなたが持っている場合は通常：

<div id="container">myContainer</div>

jQuery で Border-Width 属性を取得できます。

var borderWidth = $('#container').css('borderWidth');
alert(borderWidth);

または各側について：

var left = $('#container').css('borderLeftWidth');
var right = $('#container').css('borderRightWidth');
var top = $('#container').css('borderTopWidth');
var bottom = $('#container').css('borderBottomWidth');

alert(left+" "+right+" "+top+" "+bottom);

score 0 · Accepted Answer

.innerWidth()とを使用して.outerWidth()、境界線の有無にかかわらず幅を取得し、最初のものから 2 番目のものを引くことができます。

var someElement = $("#someId");
var outer = someElement.outerWidth();
var inner = someElement.innerWidth();

alert(outer - inner); // alerts the border width in pixels

score 0 · Accepted Answer

<script type="text/javascript">
$(document).ready(function(){
   var widthBorder = $("div").css("border","5px");
  // you can increase your pixel size according to your requirement.
});
</script>

score 0 · Accepted Answer

問題を回避し、コンテナのすべての側面の実際の境界線を計算するために、追加の内部コンテナを使用する解決策があります。したがって、あなたの状況でこの追加の内部コンテナーを使用できる場合、このフィドルは Chrome/FF/Safari/IE7/IE8 で動作し、ピクセル境界線の定義と薄い/中/厚い:

var BorderWrapper = {
    getBorderWidth: function(elem) {
        elem = jQuery(elem);
        var elemInner = jQuery(elem).find('.borderElemInner');

        var posOuter = elem.position();
        var posInner = elemInner.position();

        var result = {
            top:    posInner.top - posOuter.top - parseInt(elem.css('marginTop')),
            right:  0,
            bottom: 0,
            left:   posInner.left - posOuter.left - parseInt(elem.css('marginLeft'))
        };

        result.right = jQuery(elem).outerWidth() 
                     - jQuery(elemInner).outerWidth() 
                     - result.left;

        result.bottom = jQuery(elem).outerHeight() 
                      - jQuery(elemInner).outerHeight() 
                      - result.top;

        return result;
    }
};

jQuery の ''.position()''、''.outerWidth()''、''.outerHeight()'' を使用し、外側のコンテナーの余白も考慮します。

多分誰かがIE9でこれを確認できますか? 私はそれを持っていません:)

score 0 · Accepted Answer

私はこれをもう少しいじってみましたが、問題を解決するために思いついた唯一の解決策は、次のようなものです。

var thinBorder = 1;
var mediumBorder = 3;
var thickBorder = 5;

function getLeftBorderWidth($element) {
    var leftBorderWidth = $element.css("borderLeftWidth");
    var borderWidth = 0;


    switch (leftBorderWidth) {
    case "thin":
        borderWidth = thinBorder;
        break;
    case "medium":
        borderWidth = mediumBorder;
        break;
    case "thick":
        borderWidth = thickBorder;
        break;
    default:
        borderWidth = Math.round(parseFloat(leftBorderWidth));
        break;
    }

    return borderWidth;
}

function getRightBorderWidth($element) {
    var rightBorderWidth = $element.css("borderRightWidth");
    var borderWidth = 0;


    switch (rightBorderWidth) {
    case "thin":
        borderWidth = thinBorder;
        break;
    case "medium":
        borderWidth = mediumBorder;
        break;
    case "thick":
        borderWidth = thickBorder;
        break;
    default:
        borderWidth = Math.round(parseFloat(rightBorderWidth));
        break;
    }

    return borderWidth;
}

デモ

とに注意してMath.round()くださいparseFloat()。これらは、IE9 がの代わりにとの代わりにforを返す0.99pxためです。thin1px4.99pxthick5px

編集

コメントで、IE7 はシン、ミディアム、シックでサイズが異なると述べました。
それらはわずか 0.5 ピクセルだけずれているように見えますが、これは扱いが難しく、完全な数値が最も必要であることを示しています。

私の提案は、違いの.5pxを単に無視し、IE7以下を使用している場合に最も可能性の高い目立たない欠陥を認めるか、それを処理するのに苦労している場合は、次のように定数を調整することです。

var thinBorder = 1;
var mediumBorder = 3;
var thickBorder = 5;

// Will be -1 if MSIE is not detected in the version string
var IEVersion = navigator.appVersion.indexOf("MSIE");

// Check if it was found then parse the version number. Version 7 will be 17 but you can trim that off with the below.
If(IEVersion > -1){
    IEVersion = parseInt(navigator.appVersion.split("MSIE")[1]);
}

// Now you can simply check if you are in an ancient version of IE and adjsut any default values accordingly.
If(IEVersion < 7){
    thinBorder = 0.5;
    mediumBorder = 3.5;
    thickBorder = 4.5;
}

/// rest as normal

上記のいずれも、決してコピペの解決策ではなく、この問題に対処できるいくつかの方法のデモンストレーションにすぎません。これらすべてのヘルパーを個別の関数、プラグイン、または拡張機能に自然にラップします。

最終的な解決策では、浮動小数点オフセットと丸めの問題に対処する必要さえあるかもしれません。

これで十分ですが、始めることができるはずです。

score 0 · Accepted Answer

境界線の幅を取得:

<script type="text/javascript">
$(document).ready(function(){
   var widthBorder = $("div").css("border");
   alert(widthBorder);
   //you can split between sintax 'px'
});
</script>

jquery - jQuery で境界線の幅を取得する

6 に答える 6

デモ

Related