javascript - 使用 javascript 更改 css 属性

Question

当我点击按钮“更改/添加文本到这张图片”并在两个字段中输入 id="top-distance"和 id="left-distance"的值，然后点击按钮“完成”，这些值应设置为 #img-text 元素的 top 和 left css 属性。我尝试在下面的 doneFunction() 中这样做，但它不起作用:

	var pics = [['https://www.planwallpaper.com/static/images/ziiQN6XE5_UCWiCRXMT0B3p.jpg', 'Изображение 1'], ['https://www.planwallpaper.com/static/images/nature-wallpapers-free-download-1.jpg', 'Изображение 2'], ['https://www.planwallpaper.com/static/images/Beautiful_Wallpaper_1080p_Full_HD.jpg', 'Изображение 3'], ['https://www.planwallpaper.com/static/images/1080p-wallpaper-14854-15513-hd-wallpapers.jpg', 'Изображение 4'], ['https://static.pexels.com/photos/20974/pexels-photo.jpg', 'Изображение 5']];
	var counter = 0;

function showImage() {
  document.getElementById('main-pic').src = pics[counter][0];
  document.getElementById('img-text').innerHTML = pics[counter][1];
  //или чрез задаване на таг img тук: document.getElementById(...).innerHTML = '<img alt="Природа" class="main-pic" title="Природа" src="' + pics[counter][0] + '" />';
}

showImage();

function previousImg() {
  if (counter == 0) {
    alert('Няма предишно изображение.');
  } else {
    counter--;
  }
  showImage();
}

function nextImg() {
  if (counter == pics.length - 1) {
    alert('Няма следващо изображение.');
  } else {
    counter++;
  }
  showImage();
}

function addImg() {
  var someURL = prompt('Посочете url на изображението, което желаете да добавите.', 'https://www.picwallz.com/wp-content/uploads/2017/02/desktop-natural-beauty-cave-with-nature-pics-high-quality-for-mobile-phones-v-898x505.jpg');
  if (someURL == null) {
    alert('Вие отказахте добавянето на ново изображение.');
    return;
  }

  function isValidURL(stringURL) {
    var pattern = /(http|https):\/\/(\w+:{0,1}\w*)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%!\-\/]))?/;
    if (!pattern.test(stringURL)) {
      alert("Не сте въвели url адрес, опитайте пак!");
      return false;
    } else {
      return true;
    }
  }
  if (isValidURL(someURL)) {
    pics.push([someURL, 'Text']);
  }
}

function changeAddText() {
  document.getElementById('hidden-div').style.display = 'block';
}

function doneFunction() {
  document.getElementById('hidden-div').style.display = 'none';
  pics[counter][1] = document.getElementById('new-text').value;

  //document.getElementById('img-text').style.top.value = document.getElementById('top-distance').value;
  var pText = document.getElementById('img-text');
  var topText = document.getElementById('top-distance').value;
  if (!isNaN(topText) && (topText <= 200)) {
    pText.style.top = topText;
  } else {
    alert('Please insert a number <=200.');
  }
  var leftText = document.getElementById('left-distance').value;
  if (!isNaN(leftText) && (topText <= 100)) {
    pText.style.left = leftText;
  } else {
    alert('Please insert a number <=100.');
  }
  showImage();
}

#main-pic {
  position: relative;
  width: 500px;
  height: 350px;
}

#img-text {
  color: white;
  position: absolute;
  top: 5px;
  left: 20px;
}

.button {
  height: 40px;
  background-color: lightblue;
}

#hidden-div {
  display: none;
}

<img id="main-pic" alt="Природа" title="Природа" /><br />
<p id="img-text"></p>

<br />

<input class="button" type="button" name="previous" value="Prev" onclick="previousImg(); return false;" />
<input class="button" type="button" name="next" value="Next" onclick="nextImg(); return false;" />
<input class="button" type="button" name="next" value="Add picture" onclick="addImg(); return false;" />
<input class="button" type="button" name="change-add-text" value="Change/Add text to this picture" onclick="changeAddText(); return false;" />

<div id="hidden-div">
  <input id="new-text" type="text" name="new-text" placeholder="Your text" value="Picture" />
  <input type="number" id="top-distance" name="topText" min="0" max="200" step="5" placeholder="top" />
  <input type="number" id="left-distance" name="leftText" min="0" max="100" step="5" placeholder="left" />
  <input class="button" type="button" name="done-button" value="Done" onclick="doneFunction(); return false;" />
</div>

Answer 1

设置位置时需要包含单位。

更改这些行:

pText.style.top = topText;
pText.style.left = leftText;

到:

pText.style.top = topText + 'px';
pText.style.left = leftText + 'px';