Integration of JavaScript and CSS

Question

I was wondering if it is possible to use javascript variables inside a CSS code. I would like to implement something like this

p{
font-size: size;
}

Where, the value of the variable size would be defined by,

var size=document.getElementById("first").fontSize;

These two codes would be written in the same file and be saved as "somefile.css". This could be really useful to use in browsers which do not support or have javascript disabled.

You can use a library like jQuery for this. See api.jquery.com/prop. — Sablefoste
– Sablefoste, Commented Sep 21, 2012 at 17:50
@SableFoste Because, of course, jQuery is the answer to everything. And what about the "browsers which do not support [...] javascript" did you miss, exactly? — Niet the Dark Absol
– Niet the Dark Absol, Commented Sep 21, 2012 at 17:51

Denys Séguret · Accepted Answer · 2012-09-21 17:50:10Z

1

No, you can't do that, there are no variable in CSS.

But you can change your style from javascript :

var items = document.querySelectorAll('.someClass');
for (var i=0; i<items.length; i++) {items[i].style.font = "100px Arial"};

DEMO

answered Sep 21, 2012 at 17:50

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

noel · Accepted Answer · 2012-09-21 17:51:28Z

0

If you want this kind of functionality you should use LESS or SASS

answered Sep 21, 2012 at 17:51

noel

2,3593 gold badges27 silver badges42 bronze badges

Comments

Diodeus - James MacFarlane · Accepted Answer · 2012-09-21 17:50:08Z

0

You cannot embed variables in CSS. It is not a scripting language.

IE has some proprietary support for this, but it's not part of "the spec".

answered Sep 21, 2012 at 17:50

Diodeus - James MacFarlane

115k33 gold badges164 silver badges180 bronze badges

Comments

Niet the Dark Absol · Accepted Answer · 2012-09-21 17:51:07Z

0

Wait wait wait, so you're trying to implement JavaScript "to use in browsers which do not support [it]"? Have a think about what you're asking here.

What's wrong with just setting a font size? Some people use em units to scale elements in proportion to the text size.

answered Sep 21, 2012 at 17:51

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

1 Comment

Ayush Khemka Over a year ago

Maybe what I was trying to ask was whether it was possible or realistic to design such a language which would allow us to use that functionality.

mcknz · Accepted Answer · 2012-09-21 17:51:34Z

0

You might check out LESS/SASS.

http://coding.smashingmagazine.com/2011/09/09/an-introduction-to-less-and-comparison-to-sass/

answered Sep 21, 2012 at 17:51

mcknz

4779 silver badges28 bronze badges

Comments

David · Accepted Answer · 2012-09-21 17:54:49Z

0

The short answer is no. You can however do these things on the server side using php or whatever other language you like, you have to set the mime type to css at the top of the file. You will have to use a page redirect if javascript does not run.

answered Sep 21, 2012 at 17:54

David

2531 gold badge2 silver badges10 bronze badges

Collectives™ on Stack Overflow

Integration of JavaScript and CSS

6 Answers 6

Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related