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?
Isn't this a more clean and general way to do it?
Then use it like so:Code: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";
}
Code:// Add script to windows #1 and #2.
addScript(1); addScript(2);
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!Quote:
Originally Posted by Kovo88
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.
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:
Code:<button onclick="newWindow()">New window</button>
Code: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++;
}