javascript:改变CSS的相对位置

javascript: change CSS position by relative amount

本文关键字：相对 位置 CSS 改变 javascript      更新时间：2023-09-26

基本上我想做的是每次执行JavaScript(通过点击)，CSS left值为我的<div>减少了20%。例如，left从40%开始。第一次点击的时候应该是20%，然后是0%，然后是-20%，以此类推。我已经更新了下面的代码:

FilmstripLeft = parseInt(document.defaultView.getComputedStyle(ul).left, 10) / 4;
ul.style.left = (FilmstripLeft - 20) + "%";

ul是我使用document.getElementById()得到的<div>。这段代码现在可以工作了，但是我不确定第一行末尾是否除以4。在最后添加/ 4之前，我测试了该行返回的值为160，尽管起始值为40%。我不确定这是否因为它以像素而不是百分比返回值，在这种情况下除以4只适用于left在160px ?

div的"left"值减少20%

。根据你们的解释，你们是要降低20%，而不是20%。

getComputedStyle(ul).left

注意百分比是相对的单位。在计算时，它们被转换为绝对长度。

你只能访问原始百分比作为内联样式

var target = document.getElementById("target");
document.querySelector('input').addEventListener('click', function() {
  target.style.left = parseFloat(target.style.left) - 20 + '%';
});
#target {
  position: relative;
  width: 30px;
  height: 30px;
  background: blue;
}
<div id="target" style="left: 80%"></div>
<input type="button" value="Click" />

但是你不需要原始百分比来减去20个百分点。你可以使用calc:

var target = document.getElementById("target");
document.querySelector('input').addEventListener('click', function() {
  var current = getComputedStyle(target).left;
  target.style.left = 'calc(' + current + ' - 20%)';
});
#target {
  position: relative;
  left: 80%;
  width: 30px;
  height: 30px;
  background: blue;
}
<div id="target"></div>
<input type="button" value="Click" />

getComputedStyle()不能很好地满足您的目的，因为根据定义，它以像素为单位返回计算的样式值，而不是原始值的相对百分比。为了计算"20%"是使用计算样式，你必须手动找到父元素的宽度，然后取其中的20%:

function onClick(){
  var myElement = document.getElementById("inner");
  var leftValue = parseFloat(window.getComputedStyle(myElement).left);
  
  var parentElement = myElement.parentElement;
  var parentWidth = parseFloat(window.getComputedStyle(parentElement).width);
  var twentyPercent = parentWidth * 0.20;
  
  var newLeftValue = (leftValue - twentyPercent) + "px";
  
  myElement.style.left = newLeftValue;
  updateStatus();
}
function updateStatus(){
  document.getElementById("status").innerHTML = window.getComputedStyle(document.getElementById("inner")).left; 
}
updateStatus();
document.getElementById("btn").addEventListener("click", onClick);
#outer {
  width: 400px;
  height: 20px;
  background: #888;
}
#inner {
  width: 20px;
  height: 20px;
  position: relative;
  left: 80%;
  background: red;
}
<div id="outer">
  <div id="inner"></div>
</div>
<button id="btn">click me</button>
<div id="status"></div>

这个方法的缺点是它将left固定为像素值，而不是父元素的真实百分比，所以如果窗口/父元素的宽度改变，left的值将无法正确匹配。

如果left值是内联HTML样式而不是CSS样式，则更容易，因为您可以直接使用element.style获得它，它读取内联HTML样式值。然后你可以分配一个新的left值作为一个真实的百分比，将更新，如果窗口/父宽度的变化。

function onClick(){
  var myElement = document.getElementById("inner");
  // Note how #inner's left value is now inline instead of CSS
  var leftValue = parseFloat(myElement.style.left);
  
  var newLeftValue = (leftValue - 20) + "%";
  
  myElement.style.left = newLeftValue;
  updateStatus();
}
function updateStatus(){
  document.getElementById("status").innerHTML = document.getElementById("inner").style.left; 
}
updateStatus();
document.getElementById("btn").addEventListener("click", onClick);
#outer {
  width: 400px;
  height: 20px;
  background: #888;
}
#inner {
  width: 20px;
  height: 20px;
  position: relative;
  background: red;
}
<div id="outer">
  <div id="inner" style="left: 80%"></div>
</div>
<button id="btn">click me</button>
<div id="status"></div>

所以，如果可能的话，把你的样式放在内联而不是CSS中，因为它们更容易访问。从技术上讲，使用JavaScript访问CSS样式表规则是可能的，但它非常令人费解，如果你是web开发新手，我不建议这样做。

相关文章：