无法使用 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>

每次我单击左侧按钮 ( ) 时，蓝色条 ( div#x) 应该会缩短 1% section#a。我已经检查了很多次，但我仍然不知道我的代码有什么问题。我确实更改了一些代码，我认为问题出在这一行，lost = document.querySelector('#x').style.width因为它似乎没有返回任何应该给出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访问#x. 由于这是一个百分比，而不是静态值，因此实际上不会返回任何内容。幸运的是，我们可以通过 Javascript 的属性获取元素的渲染宽度clientWidth。使用它，我们可以找到条形的实际大小，并从中计算新值。

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

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