Question

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

＆＃13;

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 + '%';
}

＆＃13;

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

＆＃13;

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

＆＃13;

每次点击左键（div#x）时，蓝条（section#a）应该缩短1％。我已经检查了很多次，但我仍然不知道我的代码有什么问题。我确实更改了一些代码，我认为问题出现在这一行lost = document.querySelector('#x').style.width中，因为它似乎没有返回任何值100%宽度为div#x <的值/ p>

Answer 1

试一试：

＆＃13;

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";
};

＆＃13;

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

＆＃13;

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

＆＃13;

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

说明：

在原始代码中，您尝试访问style.width #x。由于这是一个百分比，而不是静态值，因此实际上不返回任何内容。幸运的是，我们可以使用Javascript＆＃39; clientWidth属性获取元素的渲染宽度。使用它，我们可以找到条形码的实际大小，并从中计算新值。

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

编辑：在评论中使用@ jwatts1980＆＃39解决方案：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获取width属性

3 个答案: