Ottenere larghezza del bordo da un div con un semplice javascript

Ho avuto questo stile applicato a un div

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

e voglio essere in grado di allertare la larghezza del bordo, ho provato con questo:

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

Ho sentito che dipende del browser, magari mi può aiutare
Sto usando Firefox 18

InformationsquelleAutor Alejandro | 2013-02-04

 

6 Replies
  1. 19

    Si prega di provare il seguente javascript:

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

    o

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

    getComputedStyle(elemento, pseudo)

    elemento:elemento per ottenere uno styling per

    pseudo:Una pseudo-selettore come “sospesi” o null se non è necessario.

    Link di riferimento: http://javascript.info/tutorial/styles-and-classes-getcomputedstyle

    • Io non sto usando Jquery ma grazie!
    • Si prega di trovare l’aggiornamento di risposta. Spero che vi aiuterà.
    • Grazie! ha funzionato
    • Una cosa importante, inoltre, è il fatto che il valore calcolato è sempre in pixel, in modo che lei abbia il “px” ma non vedere “em” o una larghezza come “medio”.
  2. 5

    Mi potrebbe essere troppo tardi, ma come mai si contrassegnato come risposta, ho pensato che avrei potuto provare.

    Se il tuo problema è la compatibilità tra browser vorrei creare un metodo personalizzato che potrei utilizzare in quasi ogni browser non c’è (che significa risalire alle basi).

    In realtà ho scavato un sacco a fare questo. Io li uso del codice jQuery perché non ho voglia di usare jQuery, ma hanno ancora la compatibilità di jQuery.

    Questa funzione risolve la tua domanda e in fondo ci sono alcuni esempi su come usarlo.

    Questa funzione utilizza il modulo “modello” attraverso l’immediata funzione che verrà eseguita non appena lo script carica la creazione di un metodo che NON polute la portata globale ma estendere le sue funzionalità attraverso una funzione per fare ciò che si voleva.

    //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;
            };
        };
    })();

    cioè

    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")); 
  3. 2

    Molto vecchia questione, ma comunque…

    Questa soluzione è piano JavaScript, e dovrebbe funzionare nei vecchi browser troppo.
    Esso misura la dimensione dell’elemento con e senza confini.

    L’esempio seguente dovrebbe funzionare correttamente se i bordi intorno all’elemento sono tutti della stessa dimensione.
    Se non, la procedura non cambia molto, devi solo impostare i bordi pari a zero, uno per uno.

    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);
  4. 1

    si può provare questo

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

    Se qualcuno è ancora alla ricerca, questo sembra essere il modo più semplice per farlo con un semplice JS.

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

    Spiegazione di seguito:

    document.getElementById("idOfYourElement") – Il ritorno la nostra elemento HTML.

    getComputedStyle Ritorno attributi css dell’elemento scelto come oggetto.

    .borderTopWidth – Attributo corrispondente da getComputedStyle oggetto (return array come questo: ("10px")).

    .slice(0, -2) – Tagliare gli ultimi 2 caratteri dal nostro array così ci liberiamo di px alla fine.

    E + all’inizio – Analizzare il resto della nostra stringa che contiene il numero vogliamo, per intero.

  6. 0

    Secondo W3Schools, questa struttura è supportato dai principali browser. Quindi non dovreste avere alcuna difficoltà nel suo utilizzo.

    Tuttavia, l’utilizzo di un framework JavaScript come jQuery sarebbe sempre aiutare a non preoccuparsi di banali problemi come questo.

Lascia un commento