PDA

View Full Version : "injecting" html with css?


Recoil
February 17th, 2007, 06:01 AM
is there any way of injecting HTML into a page with CSS?



ie, wherever a class/selector is tagged, insert a certain length of HTML... ?
evildrummer
February 17th, 2007, 06:12 AM
Explain further please, do you mean have it so when something like this is typed:


<span class="example">fefe</span>

it actually outputs:


<span class="example"><'Whatever Html tag you need'>fefe</tag></span>


if so I dont think thats possible with CSS, I would just use a server-side language for that.
Recoil
February 17th, 2007, 06:51 AM
Yeah... but not requiring the opening/closing of tags formatted as such... just boom. plop it right in there at the beginnning of the content of the element..

I mean, I already know there's a content selector... but it doesn't allow for the use of HTML.


An example would be, for instance, to automatically insert a <hr> into the element...


so.... for instance, a mock up:

.example
{
insert: html('<br><img src="foo.jpg">');
}

and

<span class="example">fefe</span>

would result in:

<span><br><img src="foo.jpg">fefe</span>
Voetsjoeba
February 17th, 2007, 08:18 AM
Thus allowing anyone who can write a user CSS stylesheet to insert arbitrary HTML and possibly scripts onto a site ? Don't think so.
simplistik
February 17th, 2007, 12:44 PM
can't be done
Surrogate
February 19th, 2007, 10:02 AM
is there any way of injecting HTML into a page with CSS?



ie, wherever a class/selector is tagged, insert a certain length of HTML... ?


To alter the document structure you must use DOM scripting (Document Object Model). This achieves what you wanted:



<script type="text/javascript">
window.onload = function() {
// Check if browser supports DOM - else silently fail
if (!document.getElementsByTagName) return false;
var span = document.getElementsByTagName("span");
// Loop through all <span>, and find the ones with the correct class
for (var i=0; i<span.length; i++) {
if (span[i].getAttribute("class") == "example") {
// Insert the html
span[i].innerHTML = "<br><img src='foo.jpg'>" + span[i].innerHTML;
}
}
}
</script>
(Unfortunately, DOM doesn't support selection by classes - which is a pain)

This should of course be put between <head></head> - and even better if you put it in a .js file, so it's loaded external like you do with your CSS. (Unless you really only need it for one page)