Javascript nested within CSS

Question

I have an idea, and I'm not entirely sure that the interpreter is incapable of handling this already, yet I am sure it does not. Therefore, my question is, does the interpreter already handle the idea I am about to propose.

Esentially, what I would like to do, is nest a block of Javascript into various locations of a stylesheet. The Javascript block should be able to access the scope of the CSS block which it is nested within. Maybe a sample code block would make this a little more clear.

.page { <script> target.header = document.createElement('div'); target.header.className = 'pageHeader'; target.header.heightPerc = 0.2; target.header.widthPerc = 1; target.header.height = target.clientHeight * target.header.heightPerc; target.header.width = target.clientWidth * target.header.widthPerc; target.header.style.height = (target.clientHeight * target.header.height) + 'px'; target.header.style.width = (target.clientWidth * target.header.width) + 'px'; target.header.style.borderBottom = '1px solid black'; target.header.style.position = 'absolute'; target.header.style.top = '0px'; target.header.style.left = ((target.clientWidth - target.header.width) / 2) + 'px'; target.appendChild('target.header'); </script> }

In my example, the target is meant to be the current element held by the CSS selector

As you can see, this is a CSS class selector with a block of Javascript inside of it, which of course, does not work. The theory is that this block of Javascript acts as a template for each element captured by the CSS selector (similarly to angular.js, yet compiled at the same time as the CSS). Is there a way that something like this could be done already (without the use o third-party libraries or frameworks)?.

Another use that I would want this for would be something like this:

HTML:

<img class="image1" ></img>

CSS:

.image1{ <script> target.src = "(URL for image)"; </script> }

If there is any current way to do any of these things, please let me know!

I'm afraid no CSS parser will accept that format. You may be able to serve that combined resource as something other than CSS, however, then split it into its CSS and Javascript components and create the appropriate <style> and <script> elements, then write glue code to execute the relevant scripts on the elements. That's quite a complicated endeavor, though. — Frédéric Hamidi
– Frédéric Hamidi, Commented Oct 27, 2014 at 15:18
CSS frameworks like LESS or Stylus let you mixin javascript in your css... lesscss.org learnboost.github.io/stylus — almightyBoognish
– almightyBoognish, Commented Oct 27, 2014 at 15:19
This is not possible and will never be possible. One CSS rule can target multiple elements. There would be many problems if it was possible what you are proposing. — dfsq
– dfsq, Commented Oct 27, 2014 at 15:19
@dfsq I'm not sure you grasp the concept. Yes, it would grab multiple elemts, thats the point. It iterates over them. Yes, this could cause major problems, if you write your code in a way to be destructive. It would be easy to make endless loops here, as you can see in one class selector I made an element with another class. If in that other classes selector, I made an element with the page class, this would be an infinite loop. Also, it would be really bad to apply an 'id' within this block — WebWanderer
– WebWanderer, Commented Oct 27, 2014 at 15:30
hhmmm, while what you're doing here won't work, it might be possible using the :after/:before psuedo selectors in tandem with the css content property. if you can add html tags, it seems plausible unless the creators directly wrote something to block js. Check out this question for some info. stackoverflow.com/questions/190396/… — Rooster
– Rooster, Commented Oct 27, 2014 at 15:34

LHLaurini · Accepted Answer · 2014-10-27 15:29:49Z

1

No, I don't think it would work. Something like this works, but I don't think it's what you want.

<script> document.write("<style>body { background: black }</style>") </script>

answered Oct 27, 2014 at 15:29

LHLaurini

2,81021 silver badges40 bronze badges

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

2 Comments

WebWanderer Over a year ago

Nope, not exactly what I was looking for, but this is an interesting was to do dynamic CSS, yet you should avoid the "document.write"-sourus-rex. Its old and dead.

LHLaurini Over a year ago

You could use even PHP, Python or something else to do this.

FloatingRock · Accepted Answer · 2014-10-27 16:40:24Z

Not javascript, but you can use PHP to do this:

index.css.php

<?php header("Content-type: text/css"); # Settings $height = 135; // px # CSS echo ".header { height: {$height}px; }"; ...

You can then include it into your document like any other css file:

<link rel="stylesheet" type="text/css" href="index.css.php">

If you're up for it, you could even pass client-side params (like window-height, etc.) to the PHP script .. but I think that's bordering on madness..

Ok, this may be bordering on madness, but it is still amazingly cool. Aside from the pre-req of being a crazy person to do this, this could yield some interesting power over some things you could acheive. Very awesome man. Thanks!

Collectives™ on Stack Overflow

Javascript nested within CSS

2 Answers 2

2 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Linked

Related