can I do this validly?
<script....>
var headtag = document.getElementsByTagName(head);
headtag.innerHTML += '<style>...</style>';
</script>
Printable View
can I do this validly?
<script....>
var headtag = document.getElementsByTagName(head);
headtag.innerHTML += '<style>...</style>';
</script>
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.
What exactly are you hoping to accomplish? Maybe we can give you a better work-around.Code:var headtag = document.getElementsByTagName('head').item(0);
If you're injecting CSS, here's a cross-browser (not thoroughly tested, though) way to do it:
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.)Code: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);
}
}
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
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.
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?
As I stated...not as it's written it won't.Quote:
Originally Posted by Kovo88
The command is getElementsByTagName(). Notice that it is plural. It returns an array of all tags that match your specification.
Code:var headtag = document.getElementsByTagName('head').item(0);
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
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.
The smartest/best way to do it would be to use Andreas' method.
so if i wanted
just in theory of courseCode: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);
}
}
paying attention to 3rd line and 3rd to last line
right?
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]
of course not!!! i said in theory, i just didnt want to create dummy css
Code:var headID = document.getElementsByTagName("head")[0];
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.appendChild(document.createTextNode("function add" + window_number + "Script() { var my" + window_number + "Fx = new Fx.Style(\"window_" + window_number + "_wone\", \'opacity\').start(0,1);"));
newScript.appendChild(document.createTextNode("$(\"window_" + window_number + "_wone\").makeResizable({ handle:$(\"window_" + window_number + "_botright\"), container:$(\"window_" + window_number + "_wone\").getParent()});"));
newScript.appendChild(document.createTextNode("$(\"window_" + window_number + "_inner\").makeResizable({ handle:$(\"window_" + window_number + "_botright\"), container:$(\"window_" + window_number + "_wone\").getParent()});"));
newScript.appendChild(document.createTextNode("$(\"window_" + window_number + "_wone\").makeDraggable({ handle:$(\"window_" + window_number + "_handle\"), container:$(\"window_" + window_number + "_wone\").getParent()});"));
newScript.appendChild(document.createTextNode("document.getElementById(\"window_" + window_number + "_wone\").style.height = \"257px\";}"));
headID.appendChild(newScript);
With that code, for some reason, if I call it in a function, say twice... for some reason, the effected elements on the page do not aquire the effects of that script.. Is there a way to parase the script once it is injected so that other functions can call it etc...?
using eval() maybe?