0

我已经开始为 iOS 平台开发一个诗歌应用程序，它在录音播放时突出显示相关文本（由用户选择）。用户将看到播放音频的选项列表（即开始行、结束行），并且随着应用程序播放录音，相关行也将突出显示。我的问题是这样的：

我负责突出显示相关文本的 CSS 代码如下所示：

#container {
    positioon:relative;
}
#highlight {
    position:absolute;
    width:75px;
    height:75px;
    top:75px;
    left:75px;
    background: rgba(255, 0, 0, 0.4);
}

宽度、高度、顶部、左侧和背景的值不是静态的，它们是动态的（即，它们对于每一行都会有所不同）。有没有办法让我将这些值从调用它的 JavaScript 函数传递给 CSS（这反过来又会从 Objective-C 传递给 JavaScript）？就是想。

4

4 回答 4

2

我可以提出不同的解决方案吗？我希望这比您当前的尝试要容易一些。

如果你有一些这样的 HTML：

<div class="lyrics">
   <div class="line">I went down to the demonstration</div>
   <div class="line">To get my fair share of abuse</div>
   <div class="line">Singing, We're gonna vent our frustration</div>
   <div class="line">If we don't we're gonna blow a 50-amp fuse</div>
</div>

这样每个“行”都是它自己的元素，那么它使您的代码可以很容易地以一定间隔逐行循环遍历歌词。这可能是歌词、活页乐谱，甚至是音频字幕……

当您循环浏览这些行时，您可以针对每一行并添加和删除类。您不必使用 jQuery 库，但我非常广泛地使用它，因此您可以执行以下操作：

// before transition
$(this).removeClass('highlight');
$(this).next('.line').addClass('highlight');

然后在 CSS 中只给“.line.highlight”或“.lyrics .highlight”一些样式定义：

.lyrics .highlight {
   font-weight:bold;
   background:#ccc;
}

然后将继承诸如宽度和高度之类的东西，您可以通过调用来引用它们：

$(this).css('width');

jQuery - css() - http://api.jquery.com/css/ jQuery - next() - http://api.jquery.com/next/ jQuery - removeClass() - http://api.jquery。 com/removeclass/ jQuery - addClass() - http://api.jquery.com/addclass/

于 2013-05-06T20:33:02.147 回答
1

是的，您所做的是在您的 javascript 中查找值。

$("#highlight").width()

例如，将为您提供实际宽度。

于 2013-05-06T20:21:08.023 回答
1

使用 jQuery 获取和操作元素的 CSS 属性，详见此处

于 2013-05-06T20:24:26.093 回答
0

您可以使用 jquery 将 css 添加到元素：

$("highlight").css('width','200px');

您可以替换'width'为任何有效的 css 属性，也可以传入多个属性。

于 2013-05-06T20:22:48.713 回答