无法使用 JavaScript 获取宽度属性答案

【问题标题】：Can't get width property with JavaScript无法使用 JavaScript 获取宽度属性
【发布时间】：2015-06-14 23:46:34
【问题描述】：

我的想法是当我点击按钮时，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 这一行，因为它似乎没有返回任何应该给100% div#x 宽度的值

【问题讨论】：

什么是catchID()？
不幸的是，style.width 没有给出来自 CSS 的百分比。
.style 对象仅具有直接应用于元素的样式。 CSS 规则隐含的样式将不可用。
@Blazemonger 我的错，catchID() 只是我自己获取 ID 元素的函数。我已经修复了正确的代码。
@jwatts1980 我确实尝试过w3schools.com/jsref/prop_style_width.asp，它与其他 HTML 代码配合得很好。

标签： javascript html css javascript-events

【解决方案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 解决方案有任何问题。

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

【讨论】：

唯一需要注意的是，每次乘以 99% 永远不会完全减少。
@jwatts1980 好点 - 我已经更新了我的答案，这应该可以解决它。
哦，请给个解释好吗？
@ScottKaye 这样更好，但它没有考虑到文档大小的变化。我认为var 应该保持当前的百分比。然后你可以乘以clientWidth。
@ScottKaye 嘿嘿，不，没关系。你有这个。我发表了之前的评论，然后点击：我已经习惯于在 HTML 元素上按像素更新大小，以至于我忘记了您可以在设置 element.style.width 时使用 % 甚至 em。

【解决方案2】：

这样试试：

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);

【讨论】：

【解决方案3】：

这个有点乱：

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);

【讨论】：