Question

我正试图抓住视频播放器中图像的高度，持续时间应该是玩家制作的任何尺寸的一半。我正在使用以下内容尝试此操作，但它不起作用：

//grabs height of play button and sets value to setHeight variable
var setHeight = $(".play").outerHeight() / 2; 

//appends setHeight variable to time-played and time-total
$(".time-played, time-total").height(setHeight);

当前设置：jsfiddle

Answer 1

好的我稍微改变了小提琴。我保持高度不变并改变时间文本的行高。

这是你在找什么？

$(".time-played, .time-total").height(setHeight*2);
$(".time-played, .time-total").css('line-height', setHeight*2 + 'px');
$(".time-played, .time-total").css('top', 0);

Fiddle

你可以将前0的样式添加到你的css文件中，如：

.time-played, .time-total {
  top: 0;
}

然后您可以删除以下行：

$(".time-played, .time-total").css('top', 0);

Answer 2

实际上，如果我理解你的问题，我根本不需要你的Javascript片段。

只需使用CSS定位控件：

.timeline .time-total{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    ...
  }

.timeline .time-played{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
...
 }

这可以通过将顶部设置为容器高度的一半，然后将元素向上平移一半高度来实现。

请参阅Fiddle

使用jquery调整文本高度到图像高度

2 个答案: