无法使用 JavaScript 获得宽度属性

Question

我的想法是当我点击按钮时，div#x 将失去 1% 的宽度。这是我的代码：

document.querySelector('#a').onclick = function() {
 var
  lost = document.querySelector('#x').style.width,
  lost = lost.slice(0, -1);
 lost = Number(lost);
 lost -= 1;
 document.querySelector('#x').style.width = lost + '%';
}

nav#control {
 display: flex;
 flex-basis: 50px;
 align-items: center;
 justify-content: center;
 background: #FFF;
 padding: 5px;
 width: 100%
}

.knob {
 display: flex;
 align-items: center;
 justify-content: center;
 width: 40px; height: 40px;
 cursor: pointer
}

#b {
 position: relative;
 flex-grow: 1;
 background: #EFEFEF;
 margin: 0 10px;
 height: 30px
}
#x {
 position: absolute;
 background: #4C8EFA;
 width: 100%; height: 30px;
 border-radius: 1px;
 z-index: 2
}
#c {
 display: flex;
 align-items: center;
 justify-content: center;
 height: 30px;
}

<nav id='control'>
 <section id='a' class='knob'><img src='x.png'/></section>
 <section id='b'>
  <div id='x'></div>
  <div id='c'>background</div>
 </section>
 <section id='d' class='knob'><img src='x.png'/></section>
</nav>

每次单击左键 (section#a) 时，蓝色条 (div#x) 应该会缩短 1%。我检查了很多次，但我仍然不知道我的代码有什么问题。我确实更改了一些代码，我认为问题出在这一行 lost = document.querySelector('#x').style.width 因为它似乎没有 return 任何应该给 100% 宽度 div#x 的值]

Answer 1

试一试：

var x = document.querySelector('#x');
var initialWidth = x.clientWidth;

window.onresize = function() {
  //Be careful about calculating too many things in the resize handler!
  //This isn't that intensive, so it shouldn't matter, but look into "debouncing" if you have things like this elsewhere
  initialWidth = x.clientWidth;
};

document.getElementById("a").onclick = function() {
  x.style.width = x.clientWidth - (initialWidth * 0.01) + "px";
};

nav#control {
  display: flex;
  flex-basis: 50px;
  align-items: center;
  justify-content: center;
  background: #FFF;
  padding: 5px;
  width: 100%
}
.knob {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  cursor: pointer
}
#b {
  position: relative;
  flex-grow: 1;
  background: #EFEFEF;
  margin: 0 10px;
  height: 30px
}
#x {
  position: absolute;
  background: #4C8EFA;
  width: 100%;
  height: 30px;
  border-radius: 1px;
  z-index: 2
}
#c {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
}

<nav id='control'>
  <section id='a' class='knob'>
    <img src='x.png' />
  </section>
  <section id='b'>
    <div id='x'></div>
    <div id='c'>background</div>
  </section>
  <section id='d' class='knob'>
    <img src='x.png' />
  </section>
</nav>

这使用 clientWidth 获取元素的实际宽度（以像素为单位），将该数字减去 1%，然后再次将数字重置为像素。

解释：

在您的原始代码中，您试图访问 style.width of #x。由于这是百分比，而不是静态值，因此实际上 return 什么也没有。幸运的是，我们可以通过 Javascript 的 clientWidth 属性获取元素的渲染宽度。使用它，我们可以找到柱的实际大小，并从中计算新值。

也可以用 insertRule 直接注入 CSS - 但我没有发现 clientWidth 解决方案有任何问题。

编辑：使用来自评论的@jwatts1980 的解决方案：http://jsfiddle.net/a9okwLd1/1/

Answer 2

这段有点乱：

catchID('a').onclick = function() {
    var
        lost = document.querySelector('#x').style.width,
        lost = lost.slice(0, -1);
    lost = Number(lost);
    lost -= 1;
    document.querySelector('#x').style.width = lost + '%';
}

还有，什么是catchID()？

试试这个：

document.querySelector('a.knob').addEventListener('click', function() {
    var elem = document.getElementById('x');
    elem.offsetWidth = .99 * elem.offsetWidth;
}, false);

Answer 3

这样试试：

var w=document.getElementById("x").offsetWidth,
r=parseInt(w*.01);
document.getElementById("a").addEventListener("click",function(){
    w-=r;
    document.getElementById("x").style.width=w+"px";
},0);

无法使用 JavaScript 获得宽度属性

Can't get width property with JavaScript

html

javascript

css

javascript-events

无法使用 JavaScript 获得宽度 属性

Can't get width property with JavaScript

html

javascript

css

javascript-events

无法使用 JavaScript 获得宽度属性