Using javascript inside CSS

Question

Problably it is a silly question (I'm newbie), but I'm developing an app with phonegap and for any device I need to define the height of it. I know that with javascript I can get the size of the screen using:

<script type="text/javascript">
document.write(screen.width+'x'+screen.height);
</script>

and I want to use screen.height value as a variable on my CSS file. With this solved I can define any item related to the height and consequently I will have the exact image on any device... sounds weird?

I tried to google but I didn't found the way to insert js into css or to insert screen.height value inside it.

Does anyone has an idea?

Thanks in advance.

You should use [media queries](http://www.w3.org/TR/css3-mediaqueries/) for it or rather import one or another CSS style sheet using Javascript. — Alvaro, Sep 19 '13 at 13:57
Besides media queries, you can choose to either use relative dimensions on your CSS (like 100%), or set styles from JavaScript. You can't have js code inside CSS. — bfavaretto, Sep 19 '13 at 13:59
It does sound like media queries is the answer to this problem; however, if you want to know more about using jQuery to affect CSS you can look into the [css category](http://api.jquery.com/category/css/) — Chris Rockwell, Sep 19 '13 at 14:01
Uou! Thanks a lot to everyone. Using @media means that I need to write several css which basically are intended to be the same. Ok I will explore that solution. — Marc Pursals, Sep 19 '13 at 14:15

score 3 · Accepted Answer · answered Sep 19 '13 at 14:05

Okay, let's answer your question.

As you said, you can do that:

<script type="text/javascript">
document.write(screen.width+'x'+screen.height);
</script>

But is hard to change the css from JavaScript. Instead, if you use jQuery it's easy to do that. The following code can help you:

<script>
$(document).ready(function(){

   var Width = $(document).width();
   $('#id_you_want_change').attr('width','valueYouWantToWidth');

});</script>

Well done! If you want a responsible website, try looking frameworks like Bootstrap and be happy :)

score 2 · Answer 2 · edited May 23 '17 at 12:31

2

use @media in Css files to define screen width and height . Check this link out for more info Device layouts using media query - portrait on phones, both on tablets

edited May 23 '17 at 12:31

Community

1
1

answered Sep 19 '13 at 13:58

Vidiya Prasanth Pappannan

727
6
16

score 1 · Answer 3 · answered Sep 19 '13 at 14:02

Try to make your css as flexible as possible. Set heights and widths as percentages rather than fixed values that need to be scaled down. For example if you needed to make a button

.button {
    width:100%;
    padding:0.5em;
}

Let the padding and the text size create the desired height. If you need to be more defined you can do as Alvaro and Vidya said and use media queries to set fixed values for certain device sizes.

Good luck!

score 1 · Answer 4 · edited May 23 '17 at 11:53

1

see this answer, generally it is considered bad practice to put js into css. Instead, what you can do is use javascript to do some styling for you when it is necessary. You probably want to learn jQuery too, it makes a lot of things a hundred times easier.

I know this is pretty vague, but hope it helps!

edited May 23 '17 at 11:53

Community

1
1

answered Sep 19 '13 at 14:03

what is sleep

916
4
12

Using javascript inside CSS

4 Answers4

Okay, let's answer your question.