Developer Network >> Other Programming >> Scripting - Client Side

innerHTML in head

can I do this validly?
<script...>
var headtag = document.getElementsByTagName(head);
headtag.innerHTML += '<style>...</style>';
</script>

[193 byte] By [Kovo88] at [2007-11-20 10:54:41]

«« Registry.SetValue problem in 2003 server
»» GDI not drawing in window

# 1 Re: innerHTML in head

Not really. To my knowledge, once the page is loaded the CSS styles are set. You can change classes, but not add different styles.

Plus, you have an error in that code anyway. The command is getElementsByTagName(). Notice that it is plural. It returns an array of all tags that match your specification.

var headtag = document.getElementsByTagName('head').item(0);
What exactly are you hoping to accomplish? Maybe we can give you a better work-around.

PeejAvery at 2007-11-8 0:43:09 >

# 2 Re: innerHTML in head

If you're injecting CSS, here's a cross-browser (not thoroughly tested, though) way to do it:
if (document.createStyleSheet) {
var style = document.createStyleSheet();
style.addRule("div.content", "display: none;");
} else {
var head = document.getElementsByTagName("head")[0];
if (head) {
var style = document.createElement("style");
style.setAttribute("type", "text/css");
style.appendChild(document.createTextNode("div.content { display: none; }"));
head.appendChild(style);
}
}

I used the above code to hide elements in a script that was located in the <head> tag (at which point no elements are programmatically accessible.)

andreasblixt at 2007-11-8 0:44:13 >

# 3 Re: innerHTML in head

ill be adding LOTS of stlyes to the head upon request of the function, the stlye names will be built from variables from the rest of the script, does ur suggestion still work?

And another quick one, isnt my method also cross bwoser? any down sides? lol

thanks a lot

Kovo88 at 2007-11-8 0:45:14 >

# 4 Re: innerHTML in head

The above code will work for you. It creates a new <style> tag and attaches it to the <head> tag. There should be no cross-browser issues.

PeejAvery at 2007-11-8 0:46:17 >

# 5 Re: innerHTML in head

awesome guys, thanks a lot, but to be clear, my script idea

<script...>
var headtag = document.getElementsByTagName(head);
headtag.innerHTML += '<style>...</style>';
</script>

accomplishes the same thing no?

Kovo88 at 2007-11-8 0:47:10 >

# 6 Re: innerHTML in head

accomplishes the same thing no?
As I stated...not as it's written it won't.

The command is getElementsByTagName(). Notice that it is plural. It returns an array of all tags that match your specification.

var headtag = document.getElementsByTagName('head').item(0);

PeejAvery at 2007-11-8 0:48:09 >

# 7 Re: innerHTML in head

oh ok. because i want the script to write the style tags in the <head> tag, which is what I thought my script idea did, and of course, on one page, there is only one head tag.

thanks

Kovo88 at 2007-11-8 0:49:15 >

# 8 Re: innerHTML in head

sorry peej, i just saw ur first reply :P

ok basically, i want my script to add styles on the fly after the page has loaded, so that related elements on the page would aquire the new styles.

Kovo88 at 2007-11-8 0:50:18 >

# 9 Re: innerHTML in head

The smartest/best way to do it would be to use Andreas' method.

PeejAvery at 2007-11-8 0:51:13 >

# 10 Re: innerHTML in head

so if i wanted

if (document.createStyleSheet) {
var style = document.createStyleSheet();
style.addRule("div.content", "display: none; width: 500px;");
} else {
var head = document.getElementsByTagName("head")[0];
if (head) {
var style = document.createElement("style");
style.setAttribute("type", "text/css");
style.appendChild(document.createTextNode("div.content { display: none; } div.content { display: none; } div.content { display: none; } div.content { display: none; } div.content { display: none; }"));
head.appendChild(style);
}
}

just in theory of course

paying attention to 3rd line and 3rd to last line

Kovo88 at 2007-11-8 0:52:20 >

# 11 Re: innerHTML in head

right?

Kovo88 at 2007-11-8 0:53:21 >

# 12 Re: innerHTML in head

Yes. But I hope you don't really plan to repeat div.content { display: none; } so many times. You only need it once.

Please remember to use code tags.

[code]
code goes here
[/code]

PeejAvery at 2007-11-8 0:54:16 >

# 13 Re: innerHTML in head

of course not!!! i said in theory, i just didnt want to create dummy css

Kovo88 at 2007-11-8 0:55:26 >

# 14 Re: innerHTML in head

Kovo88 at 2007-11-8 0:56:21 >

# 15 Re: innerHTML in head

Isn't this a more clean and general way to do it?
function addScript(window_number) {
var prefix = "window_" + window_number + "_";
var wone = $(prefix + "wone");
var container = wone.getParent();

var fx = new Fx.Style(wone, "opacity").start(0, 1);

wone.makeResizable({ handle: $(prefix + "botright"), container: container });
$(prefix + "inner").makeResizable({ handle: $(prefix + "botright"), container: container });
wone.makeDraggable({ handle: $(prefix + "handle"), container: container });
wone.style.height = "257px";
}

Then use it like so:
// Add script to windows #1 and #2.
addScript(1); addScript(2);

andreasblixt at 2007-11-8 0:57:25 >

# 16 Re: innerHTML in head

using eval() maybe?
Don't ever use eval() unless you are 100% in control of what it is about to do. It is very powerful, but sometimes too powerful. It can and will execute anything passed to it!

PeejAvery at 2007-11-8 0:58:24 >

# 17 Re: innerHTML in head

blixt, your script makes sense, but still does not help my code need.
I will give you the simplest example. I am making a button that will create a large chunk of html everytime it is clicked. The chunk of html is made up of DIVs, text etc. Some of these divds have ID's and some have classes. The script I am trying to reproduce defines many effects (via mootools). These effects are ID SPECIFIC. So when Someone clicks the button 3 times, I need all 3 chuncks of code to be usable i.e. the script must be reproduced 3 times with the wundow_number being different for all three and the elemnets picking up the effects from the script. All without refreshing the page!

Its tricky.

Kovo88 at 2007-11-8 0:59:27 >

# 18 Re: innerHTML in head

You want to create a new set of elements every time a button is clicked. Each set of elements should share a number in their ID's. Is this correct?

The function I posted will work, and here's how you'd use it with the generation code:
<button onclick="newWindow()">New window</button>

var window_number = 1;
function newWindow() {
var prefix = "window_" + window_number + "_";

var wone = document.createElement("div");
wone.id = prefix + "wone";

var botright = document.createElement("div");
botright.id = prefix + "botright";

var inner = document.createElement("div");
inner.id = prefix + "inner";

// someElement.appendChild(wone);
// ...

addScript(window_number);

window_number++;
}

andreasblixt at 2007-11-8 1:00:29 >

It' is a microsoft Developer Network Technologies site...

innerHTML in head

Other Programming

All Classified

Other Programming New Topic

Other Programming Hot Topic