javascript - 尝试从 JavaScript 向 CSS 传递参数

Question

我已经开始为 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)？只是想知道。

Answer 1

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

如果您有这样的 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/