我已经开始为 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)?只是想知道。
最佳答案
我可以提出不同的解决方案吗?我希望这比您当前的尝试容易一些。
如果您有这样的 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/
关于javascript - 尝试从 JavaScript 向 CSS 传递参数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16406572/