Question

我正在尝试使用JavaScript更改html元素的像素位置。我的函数应该接受用户输入的位置，并根据数组更改像素坐标。

此功能应在用户输入的位置创建一个按钮，但是什么也没有发生。我认为问题在于设置样式属性，该样式属性既需要文本字符串，又需要存储位置字符串的变量。任何帮助将不胜感激。

var arr = [
  ["A1", "left:81px;"],
  ["A2", "left:145px;"]
]

function moveObject(arr) {
  var location = prompt("Enter location", "A1");
  var i;
  for (let i = 0; i < arr.length; i++) {
    if (arr[i][0] === location) {
      destination = arr[i][1] + ";";
    }
  }
  var box = document.createElement("button");
  box.setAttribute("style", "position: absolute;");
  box.setAttribute("style", destination)
  box.innerText = location; 
  document.body.appendChild(box);
}
moveObject(arr)

Answer 1

合并css值字符串，并且只调用一次setAtrribute('style')。

第二个电话抹掉了第一个电话

当数组中的值中已经存在;时，您还会添加一个额外的undefined。

请注意，我尚未添加任何验证，表明用户输入的值存在于数组中。在样式中添加var arr = [ ["A1", "left:81px;"], ["A2", "left:145px;"] ] function moveObject(arr) { var location = prompt("Enter location", "A1"); var i; for (let i = 0; i < arr.length; i++) { if (arr[i][0] === location) { destination = arr[i][1] ; } } var box = document.createElement("button"); // combine style values box.setAttribute("style", "position: absolute;" + destination); box.innerText = location; document.body.appendChild(box); } moveObject(arr)值之前，您需要自己做

 
 //it is possible to do it directly after closing the dialog
 openDialog() {
    let dialogRef = this.dialog.open(DialogContractorComponent, {
      height: '540px',
      width: '500px',
      data: { title: 'Contractors'}
    })
    dialogRef.afterClosed().subscribe(data=>{
    this.form.get('contractor_id').patchValue(data)
    
    })
  }

Answer 2

几个问题

我删除了一个流浪"，并添加了一些文字。然后，我从字符串的左边移开，并将位置用作查找表

var arr = {
  "A1":  {"left":"81px"},
  "A2":  {"left":"145px"}
}

function moveObject(arr) {
  var location = prompt("Enter location", "A1");
  if (arr[location]) {
    var box = document.createElement("button");
    box.setAttribute("style", "position: absolute;");
    var key = Object.keys(arr[location])
    box.style[key] = arr[location][key]
    box.innerText = location; 
    document.body.appendChild(box);
  }
  else alert("Location '"+location+"' not available")
}
moveObject(arr)

使用javascript动态更改html元素的位置

2 个答案: