javascript：按相对数量更改CSS位置

Question

基本上，我想做的是每次执行JavaScript（通过单击）时， <div>的CSS left值都会减少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。 我测试的结果是，即使起始值为40％，在最后添加/ 4之前，该行仍返回160。 我不确定这是否是因为它返回的是以像素为单位的值而不是百分比，在这种情况下，除以4仅在left为160px吗？

Answer 1

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开发，我不建议您这样做。

Answer 2

我的div的“左”值减少了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" />