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

这有点像静态。 -我们知道的价值观；

但是在本例中，用户将提供职位名称，值。用户可以选择任意位置-底部，右侧，顶部，左侧，并可以添加任何值，例如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

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

1.2.4.0/15

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

Answer 2

这可能会帮助您，让我知道是对的还是您需要更多信息。

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

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

如果需要，可以将“ getElementById”替换为“ getElementsByClassName”。

我在stackoverflow https://stackoverflow.com/a/46754513/6821907

上找到了这个问题的答案

Answer 3

This JSFiddle could help you，基本上，通过将按钮设置为在具有特定高度的div内的相对位置，您可以在该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>

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

3 个答案: