I create via a String some DOM-Elements and assign it via innerHTML to a div. Now I need a flexible width of the span element (span_homebase). What I experience is that sometimes (for me it looks randomly) it returns other width than expected. I need the width of this span element because after this in the same line there is an Information Button but the width of the span could be different. So I use the width of span element as margin for the information button. Code is as follows. I searched for a async handler of innerHTML but in another post somebody said that it is not required because it is assigned instantly. Are there any thoughts what to try? Because the information is now sometimes on the right place and sometimes not.

string = string + "<span id ='span_homebase'>" + homebaseCity + "</span>";
string = string + "<div class='section-end'></div>";
element.innerHTML = string;
var marginInfoHomebase = document.getElementById('span_homebase').offsetWidth + 20;
document.getElementById("information_button_homebase").style.margin = "5px 0 0 " + marginInfoHomebase + "px";

Now if I open the respective site for me sometimes the marginInfoHomebase sometimes returns 108 and sometimes 183 even if the same value is assigned to span element. Very strange. Any thoughts?

EDIT: Working Example:

function createHomeSettingsView(settingsA){
    var element = document.getElementById("table-settings");
    var string = "";
    for(var i = 0; i < settingsA.length; i++){
        for(var z = 0; z < settingsA[i].length; z++){
            if(i == 1){
                //Notification buttons
                if(z == 1){
                    //homebase setting
                    if(window.localStorage.getItem("switch_homebase") == 1){
                        //homebase on
                        var homebaseCity = settingsA[i][z] + ": " + window.localStorage.getItem("homebase_loc");
                        string = string + " \
                        <div class='row' style='height:100px;' id='settings-sec-"+ i +"-row-" + z +"'> \
                            <div class='text'> \
                                <span id='span_homebase'>" + homebaseCity + "</span> \
                            </div> \
                            <div onClick='homebaseInfoClick();' class='information_button' id='information_button_homebase'></div>\
                            <div id='handleAutoSwitcherHomebase'></div>\
                            <div id='showRadiusRangeHomebase'>Radius: 30km</div>\
                            <input class='sliders' id='changeRadiusRangeHomebase' type='range' min='5' max='100' step='5' oninput='handleChangeHomebase(this.value)' onchange='handleInputHomebase(this.value)' >\
                        </div>";
                    }
                    else{
                        //homebase off
                        string = string + " \
                        <div class='row' id='settings-sec-"+ i +"-row-" + z +"'> \
                            <div class='text'>\
                                <span id='span_homebase'>" + settingsA[i][z] + "</span> \
                            </div> \
                            <div onClick='homebaseInfoClick();' class='information_button' id='information_button_homebase'></div>\
                            <div id='handleAutoSwitcherHomebase'></div>\
                        </div>";
                    }
                }
            }           
        }
    }
    element.innerHTML = string;
    var marginInfoHomebase = document.getElementById("span_homebase").offsetWidth + 25;
    var marginText = "5px 0 0 " + marginInfoHomebase + "px";
    console.log("Span: " + marginInfoHomebase);
    document.getElementById("information_button_homebase").style.margin = marginText;
}

CSS:

.container .table-settings{
    top: 64px;
    position: absolute;
    padding:0;
    left: 0;
    right: 0;
    bottom:0;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    background-color: #ECEBF3;
}

.container .table-settings .row{
    background-color: white;
    padding-top: 14px;
    height:50px;
    border-bottom: 1px solid LightGray;
}

.container .table-settings .row .text{
    margin-left: 15px;
    color: black;
    float: left;
}

#span_homebase{
    display: inline-block;
}

I create via a String some DOM-Elements and assign it via innerHTML to a div. Now I need a flexible width of the span element (span_homebase). What I experience is that sometimes (for me it looks randomly) it returns other width than expected. I need the width of this span element because after this in the same line there is an Information Button but the width of the span could be different. So I use the width of span element as margin for the information button. Code is as follows. I searched for a async handler of innerHTML but in another post somebody said that it is not required because it is assigned instantly. Are there any thoughts what to try? Because the information is now sometimes on the right place and sometimes not.

string = string + "<span id ='span_homebase'>" + homebaseCity + "</span>";
string = string + "<div class='section-end'></div>";
element.innerHTML = string;
var marginInfoHomebase = document.getElementById('span_homebase').offsetWidth + 20;
document.getElementById("information_button_homebase").style.margin = "5px 0 0 " + marginInfoHomebase + "px";

Now if I open the respective site for me sometimes the marginInfoHomebase sometimes returns 108 and sometimes 183 even if the same value is assigned to span element. Very strange. Any thoughts?

EDIT: Working Example:

function createHomeSettingsView(settingsA){
    var element = document.getElementById("table-settings");
    var string = "";
    for(var i = 0; i < settingsA.length; i++){
        for(var z = 0; z < settingsA[i].length; z++){
            if(i == 1){
                //Notification buttons
                if(z == 1){
                    //homebase setting
                    if(window.localStorage.getItem("switch_homebase") == 1){
                        //homebase on
                        var homebaseCity = settingsA[i][z] + ": " + window.localStorage.getItem("homebase_loc");
                        string = string + " \
                        <div class='row' style='height:100px;' id='settings-sec-"+ i +"-row-" + z +"'> \
                            <div class='text'> \
                                <span id='span_homebase'>" + homebaseCity + "</span> \
                            </div> \
                            <div onClick='homebaseInfoClick();' class='information_button' id='information_button_homebase'></div>\
                            <div id='handleAutoSwitcherHomebase'></div>\
                            <div id='showRadiusRangeHomebase'>Radius: 30km</div>\
                            <input class='sliders' id='changeRadiusRangeHomebase' type='range' min='5' max='100' step='5' oninput='handleChangeHomebase(this.value)' onchange='handleInputHomebase(this.value)' >\
                        </div>";
                    }
                    else{
                        //homebase off
                        string = string + " \
                        <div class='row' id='settings-sec-"+ i +"-row-" + z +"'> \
                            <div class='text'>\
                                <span id='span_homebase'>" + settingsA[i][z] + "</span> \
                            </div> \
                            <div onClick='homebaseInfoClick();' class='information_button' id='information_button_homebase'></div>\
                            <div id='handleAutoSwitcherHomebase'></div>\
                        </div>";
                    }
                }
            }           
        }
    }
    element.innerHTML = string;
    var marginInfoHomebase = document.getElementById("span_homebase").offsetWidth + 25;
    var marginText = "5px 0 0 " + marginInfoHomebase + "px";
    console.log("Span: " + marginInfoHomebase);
    document.getElementById("information_button_homebase").style.margin = marginText;
}

CSS:

.container .table-settings{
    top: 64px;
    position: absolute;
    padding:0;
    left: 0;
    right: 0;
    bottom:0;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    background-color: #ECEBF3;
}

.container .table-settings .row{
    background-color: white;
    padding-top: 14px;
    height:50px;
    border-bottom: 1px solid LightGray;
}

.container .table-settings .row .text{
    margin-left: 15px;
    color: black;
    float: left;
}

#span_homebase{
    display: inline-block;
}

• javascript
• html
• css

2 Answers 2

To get an inline element's width use getBoundingClientRect method:

var mySpan = document.getElementById("mySpan");

var spanWidth = mySpan.getBoundingClientRect().width;
var spanHeight = mySpan.getBoundingClientRect().height;

By default a span element has no dimension because its CSS display property is inline.

If you want to give it a width, you should change that property to inline-block.

<style>
span {
    display: inline-block ;
}
</style>

Now you can play with its dimensions.