javascript - 如何动态更改固定位置样式 - 使用 JavaScript。设置位置名称、值

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>

必须使用 JavaScript 更改样式

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

这有点像静态。 - 我们知道值(value)观；

但在我们的例子中，用户将给出位置名称、值。 用户可以选择任何位置 - 底部、右侧、顶部、左侧，并可以添加任何值，如 10px、100px

我试过，但无法添加职位名称

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

Answer 1

您可以使用方括号更改样式:

dynamic_btn.style[position_1] = position_1_value;

这样，您就可以访问动态命名属性的值。