Call javascript function from style inside div tag

Question

I want to call javascript function in left prop from style inside div tag.

function setLeft() {
        return '15px';
    }

<div class="configValue" style="position: absolute; left: setLeft()">
  <strong>
   @Html.DisplayNameFor(m => m.First().ConfigurationValue)
  </strong>
</div>

I tried also something like this, but did not work:

"javascript:setLeft();"

you cannot do this, but you can change left prop by script in js — Slavik, Sep 13 '18 at 12:48
You can't. However you *can* invoke a function after the page loads and [edit the style](https://stackoverflow.com/questions/14753147/add-inline-style-using-javascript) there. — BackSlash, Sep 13 '18 at 12:49
A way of doing this would be: 1. `style="position: absolute; left:var(--left)"` and 2. use a javascript function to set the `--left`variable: `yourElement.style.setProperty("--left", "15px"); — enxaneta, Sep 13 '18 at 13:23

score 1 · Accepted Answer · edited Sep 13 '18 at 12:53

1

You cannot do this. However, you could change the style from JS though.

var configValue = document.querySelector('.configValue');
configValue.style.left = setLeft();

edited Sep 13 '18 at 12:53

evolutionxbox

3,932
6
34
51

answered Sep 13 '18 at 12:49

Ozzy Walsh

877
9
17

score -1 · Answer 2 · answered Sep 13 '18 at 13:00

Why don't you just use jQuery to add an attribute?

<div class="configValue" style="position: absolute" onload="setleft()">

jQuery:

function setleft(){
    $(this).css(left:"15px");
}

This should work. Maybe my syntax is wrong though, haven't done web development in a while

Call javascript function from style inside div tag

2 Answers2