How to Change the Fixed Position Styles Dynamically - using JavaScript. Set position name, Values

Question

var btn = document.querySelector('.btn');

btn.style.position = "fixed";

btn.style.bottom = "100px";

btn.style.right = "100px";



/* here the bottom and right is not fixed - and value 100px is also not fixed
- this values are given user  - a user may select postion to top left, top right, bottom left */ 

/* An example - this are user given values - and based on this values how can i set the positon  */
var position_1 = "top";
var position_2 = "right"

var position_1_value = "100px";
var postion_2_value = "100px";



var dynamic_btn = document.querySelector('.dynamic-btn');

dynamic_btn.style.position = "fixed";

/* dynamic_btn.style.top = position_1_value; */
dynamic_btn.style.position_1 = position_1_value;

/* dynamic_btn.style.right = postion_2_value; */
dynamic_btn.style.position_2 = postion_2_value;

<button class="btn">hello</button>

<button class="dynamic-btn">Dynamic button</button>

Have to change the Styles using JavaScript

var btn = document.querySelector('.btn');
btn.style.position = "fixed";
btn.style.bottom = "100px";
btn.style.right = "100px";

This is some thing like static. - with know values we did;

But In our case user will give the position name, value. User may choose any position - bottom, right, top, left and can add any value like 10px, 100px

something I tried, but unable to add the position name

var position_1 = "top";
var position_2 = "right"
var position_1_value = "100px";
var postion_2_value = "100px";

var dynamic_btn = document.querySelector('.dynamic-btn');

dynamic_btn.style.position = "fixed";

/* dynamic_btn.style.top = position_1_value; */
dynamic_btn.style.position_1 = position_1_value;

/* dynamic_btn.style.right = postion_2_value; */
dynamic_btn.style.position_2 = postion_2_value;

Demo

Use square brackets notation, see: https://stackoverflow.com/questions/4968406/javascript-property-access-dot-notation-vs-brackets — caiovisk, Jul 25 '18 at 08:00

Eytibi · Accepted Answer · 2018-07-25T08:08:53.413

1

You can change the style using square brackets:

dynamic_btn.style[position_1] = position_1_value;

This way, you can access values of dynamically named properties.

edited Jul 25 '18 at 08:08

answered Jul 25 '18 at 07:59

Eytibi

545
6
12

score 0 · Answer 2 · answered Jul 25 '18 at 08:00

This maybe can help you, let me know if it's right or you need some more info.

document.getElementById("xyz").style.setProperty('padding-top', '10px');

// version with !important priority
document.getElementById("xyz").style.setProperty('padding-top', '10px', 'important');

If you need you can replace "getElementById" with "getElementsByClassName".

I've found the answer in this question on stackoverflow https://stackoverflow.com/a/46754513/6821907

score 0 · Answer 3 · answered Jul 25 '18 at 08:34

This JSFiddle could help you, basically by setting the button with a relative position inside a div with a specific height you are allowed to move the control freely inside that div

JavaScript

document.querySelector('.move').addEventListener('click', function () {
 var dynamicBtn = document.querySelector('.dynamic-btn');
 var top = document.querySelector('#top');
 var left = document.querySelector('#left');

 dynamicBtn.style.position = 'relative';
 dynamicBtn.style.top = top.value + 'px';
 dynamicBtn.style.left = left.value + 'px';
});

CSS

.main {
  height: 100%;
}

.controls {
  height: 10%;
}

.space {
  height: 90%;
}

HTML

<div class="main">
  <div class="controls">
    <button class="move">move</button>
    <input type="number" placeholder="top" id="top" value="10" />
    <input type="number" placeholder="left" id="left" value="20" />
  </div>

  <div class="space">
    <button class="dynamic-btn">Dynamic button</button>
  </div>
</div>

friend, the major issue is on how to change the positions - top, left, bottom, right. any how thanks for your answer. — v-r, Jul 25 '18 at 08:40

How to Change the Fixed Position Styles Dynamically - using JavaScript. Set position name, Values

3 Answers3