Question

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

我的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>

这样每条线都可以使用＆＃39;它是自己的元素，然后它使您的代码很容易逐行循环遍历歌词。这可能是歌词，乐谱，甚至是音频字幕......

当您循环显示这些行时，您可以定位每个行并添加和删除类。你不必使用jQuery库，但是我使用它非常广泛，所以你可以做类似的事情：

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

然后在CSS中给出＆＃34; .line.highlight＆＃34;或＆＃34; .lyrics .highlight＆＃34;一些样式定义：

.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/

Answer 2

是的，你所做的就是在你的javascript中，查找价值。

$("#highlight").width()

例如，

将获得实际宽度。

Answer 3

您可以使用jquery：

将css添加到元素中

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

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

Answer 4

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

试图从JavaScript传递参数到CSS

4 个答案: