Trying to pass parameters to CSS from JavaScript

Question

I have started working on a poetry app for the iOS platform which highlights the relevant text as the recording plays (as selected by the user). The user will see a list of options to play the audio (i.e. starting line, ending line), and as the app plays the recording, the relevant line will also be highlighted. My question is this:

My CSS code which is responsible for highlighting the relevant text looks like this:

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

The values for width, height, top, left, and background are not static, they are dynamic (i.e. they will differ for each line). Is there a way for me to pass these values to the CSS from the JavaScript function that is calling it (which would in turn, be pass to the JavaScript from Objective-C)? Just wondering.

Pass it how? You can change an elements styling with javascript! — adeneo, May 06 '13 at 20:20
I guess what I'm asking is, can I pass parameters to CSS from a JavaScript function the way I can pass parameters to a method from within a programming language like Java or Objective-C? — syedfa, May 06 '13 at 20:22
Similar can be found [here][1] [1]: http://stackoverflow.com/questions/566203/changing-css-values-with-javascript — S.N, May 06 '13 at 20:26

score 2 · Answer 1 · answered May 06 '13 at 20:33

May I propose a different solution? I hope this is a little easier than your current attempt.

If you have some HTML like this:

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

So that each 'line' is it's own element, then it makes it very easy for your code to cycle through the lyrics line by line at an interval. This could be song lyrics, sheet music, even audio captions...

As you cycle through the lines you can target each one and add and remove classes. You don't have to use the jQuery library, but I use it pretty extensively so you could do something like:

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

Then in CSS just give the ".line.highlight" or ".lyrics .highlight" some style definitions:

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

Things like the width and height would then be inherited, and you could reference them by calling:

$(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/

Thanks very much for your answer. The problem is that I am highlighting sections of poetry that are on an image, and the language is not European, so it's not easy for me to take the same text and put into the html unfortunately. — syedfa, May 06 '13 at 20:39

score 1 · Answer 2 · answered May 06 '13 at 20:21

1

yes, what you do is in your javascript, look up the value.

$("#highlight").width()

for example, will get you the actual width.

answered May 06 '13 at 20:21

nycynik

7,371
8
62
87

score 1 · Answer 3 · answered May 06 '13 at 20:24

1

Use jQuery to get and manipulate CSS properties of elements, as detailed here

answered May 06 '13 at 20:24

Stefano Sanfilippo

32,265
7
79
80

score 0 · Accepted Answer · answered May 06 '13 at 20:22

0

You can add css to an element using jquery:

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

and you can replace 'width' with any valid css property, as well as pass in multiple properties.

answered May 06 '13 at 20:22

eidsonator

1,319
2
11
25

Trying to pass parameters to CSS from JavaScript

4 Answers4