Javascript width of span element

Question

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;
}

Wojtek Majerski · Accepted Answer · 2018-06-26 13:45:32Z

20

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;

answered Jun 26, 2018 at 13:45

Wojtek Majerski

3,6672 gold badges18 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Supersharp · Accepted Answer · 2015-09-29 11:55:37Z

12

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.

answered Sep 29, 2015 at 11:55

Supersharp

31.5k11 gold badges105 silver badges149 bronze badges

7 Comments

Moritz Pfeiffer Over a year ago

thats what I also currently discovered. Thanks :)!! Now it works everytime. But was strange that sometimes it was correct and sometimes not

Supersharp Over a year ago

actually the dimension properties still exist for an inline element but they are dynamically calculated (based on content and on the surrounding block and inline-block elements). So they could be correct sometimes I guess.

Moritz Pfeiffer Over a year ago

I added this and worked. But now sometimes I discover that it is possible that there are three different values returned. How could that be? Really I don't know why. I thought this is fixed now but sometimes it happens that it returns 184 or 208 but should be 224. Any thoughts?

Supersharp Over a year ago

The browser try to use the defined value if possible otherwise it will estimate a value depending on the available layout. You should post a running example if you need more explanation.

Moritz Pfeiffer Over a year ago

I added my respective Code is this enough?

|

Collectives™ on Stack Overflow

Javascript width of span element

2 Answers 2

Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related