我想创建这种效果：https://bewegen.com/en 它在“加速自行车共享”部分下。我对布局进行了概述，但样式有问题，也不确定如何在左侧创建计数器。我假设我需要获取每个h1的高度，然后将其向下移动该高度。
以下是html：
<div class="why-us__carousel">
<div class="carousel__count">
<h1 class="count__zero">0</h1>
<div class="count__num-item-holder">
<h1 class="count-num-item">1</h1>
<h1 class="count-num-item">2</h1>
<h1 class="count-num-item">3</h1>
<h1 class="count-num-item">4</h1>
<h1 class="count-num-item">5</h1>
<h1 class="count-num-item">6</h1>
<h1 class="count-num-item">7</h1>
<h1 class="count-num-item">8</h1>
<h1 class="count-num-item">9</h1>
</div>
</div>
<div class="carousel__item">
<div class="item__navigation">
<a id="arrow-left" class="arrow">
<svg width="48px" height="48px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Desktop-HD-Copy-7" transform="translate(-854.000000, -2100.000000)" fill-rule="nonzero">
<g id="Group-3" transform="translate(855.000000, 2101.000000)">
<polyline id="Path" stroke="#979797" points="25.3616433 28.4003541 20 23.0387108 25.3616433 17"></polyline>
<circle id="Oval" stroke="#FFFFFF" cx="23" cy="23" r="23"></circle>
</g>
</g>
</g>
</svg>
</a>
<a id="arrow-right" class="arrow">
<?xml version="1.0" encoding="UTF-8"?>
<svg width="48px" height="48px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 51.3 (57544) - http://www.bohemiancoding.com/sketch -->
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Desktop-HD-Copy-7" transform="translate(-854.000000, -2100.000000)" fill-rule="nonzero">
<g id="Group-3" transform="translate(878.000000, 2124.000000) rotate(-180.000000) translate(-878.000000, -2124.000000) translate(855.000000, 2101.000000)">
<polyline id="Path" stroke="#979797" points="25.3616433 28.4003541 20 23.0387108 25.3616433 17"></polyline>
<circle id="Oval" stroke="#FFFFFF" cx="23" cy="23" r="23"></circle>
</g>
</g>
</g>
</svg>
</a>
</div>
<p class="item__count">01</p>
<h1 class="item__title"></h1>
<h1 class="item__description"></h1>
</div>
</div>
这是CSS：
.why-us{
@include element("carousel"){
width: 80%;
// height: 200px;
margin: 0 auto;
position: relative;
border: 1px solid green;
}
.carousel__count{
position: absolute;
left: 0%;
top: 45%;
// transform: translateY(-20%);
display: flex;
border: 1px solid red;
.count__zero, .count-num-item{
font-size: 250px;
line-height: 0;
}
.count-num-item{
&:not(:first-child){
transform: translateY(200px);
}
}
}
.carousel__item{
position: relative;
left: 425px;
width: 400px;
height: 400px;
border: 1px solid blue;
}
.item__navigation{
position: absolute;
left: 50%;
transform: translateX(-50%);
top: -70px;
display: flex;
width: 50%;
justify-content: space-evenly;
.arrow{
cursor: pointer;
}
}
}
这是JavaScript：
class WhyUs {
constructor() {
//global variables
this.arrowRight = document.querySelector('#arrow-right');
this.arrowLeft = document.querySelector('#arrow-left');
this.h1Test = document.querySelectorAll('.count-num-item')[0];
console.log(this.h1Test.offsetHeight);// this isn't working.
//method calls
this.events();
}
events(){
this.arrowRight.addEventListener('click', this.next.bind(this));
this.arrowLeft.addEventListener('click', this.previous.bind(this));
}
previous(){
alert('previous');
}
next(){
alert('next');
}
}
export default WhyUs;
每个h1标签的高度都不起作用，如何解决此问题，或者还有其他方法吗？要添加的是，clientHeight给我的值为 0 而且：getBoundingClientRect（）的高度值也为0。
谢谢。
答案 0 :(得分：3)
使用getBoundingClientRect()：
https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
返回的值是一个DOMRect对象，它是getClientRects（）返回的矩形元素的并集，即与该元素关联的CSS边框。结果是包含整个元素的最小矩形，具有只读的left，top，right，bottom，x，y，width和height属性，以像素为单位描述整个边框。宽度和高度以外的属性均相对于视口的左上角。
在您的情况下：
this.h1Test = document.querySelectorAll('.count-num-item')[0];
var height = this.h1Test.getBoundingClientRect().height;
要包括顶部和底部边距，请使用：
var h1Margins = parseInt(elm.currentStyle.marginTop, 10) + parseInt(elm.currentStyle.marginBottom, 10);
var heightWithMargins = height + h1Margins;
尝试计算h1标签的高度时现在变为0的原因是，您的CSS将.count-num-item选择器设置为{{1} 1}}：
line-height0const boundingRect = document.getElementById('test-h1').getBoundingClientRect()
document.getElementById('bounding-rect').textContent = JSON.stringify(boundingRect, null, 2)
答案 1 :(得分：1)
您应该为此使用clientHeight attr：
imags = os.path.join(os.sep,'home','alex','Curso_DH','Algoritmos_avanzados','Practica','AlgoritmosAvanzadosPractica','imagenes')
imgPath = gb.glob(imags+'/*.jpg')
X_train = []
for i in (imgPath):
X_train.insert(j,imageio.imread(i))
j = j + 1
imags_ext = os.path.join(os.sep, 'home', 'alex', 'Curso_DH', 'Algoritmos_avanzados', 'Practica', 'AlgoritmosAvanzadosPractica','trainingdata','outdoor')
imgPath = gb.glob(imags_ext+'/*.jpg')
Y_train = []
j = 0
for i in (range(len(imgPath))):
Y_train.insert(j,1)
j = j + 1
imags_ext = os.path.join(os.sep, 'home', 'alex', 'Curso_DH', 'Algoritmos_avanzados', 'Practica', 'AlgoritmosAvanzadosPractica','trainingdata','indoor')
imgPath = gb.glob(imags_ext+'/*.jpg')
j = 0
for i in (range(len(imgPath))):
Y_train.insert(j,0)
j = j + 1
imags = os.path.join(os.sep,'home','alex','Curso_DH','Algoritmos_avanzados','Practica','AlgoritmosAvanzadosPractica','imagenes_test')
imgPath = gb.glob(imags+'/*.jpg')
X_test = []
j = 0
for i in (imgPath):
X_test.insert(j,imageio.imread(i))
j = j + 1
imags_ext = os.path.join(os.sep, 'home', 'alex', 'Curso_DH', 'Algoritmos_avanzados', 'Practica', 'AlgoritmosAvanzadosPractica','testdata','outdoor')
imgPath = gb.glob(imags_ext+'/*.jpg')
Y_test = []
j = 0
for i in (range(len(imgPath))):
Y_test.insert(j,1)
j = j + 1
imags_ext = os.path.join(os.sep, 'home', 'alex', 'Curso_DH', 'Algoritmos_avanzados', 'Practica', 'AlgoritmosAvanzadosPractica','testdata','indoor')
imgPath = gb.glob(imags_ext+'/*.jpg')
j = 0
for i in (range(len(imgPath))):
Y_test.insert(j,0)
j = j + 1
答案 2 :(得分：1)
该代码在http://jsfiddle.net/o25dfz7j/1/中有效。
this.h1Test.offsetHeight // it works, output 38 in fireforx
this.h1Test.clientHeight // it works too, output 38 in fireforx