javascript - Style switcher help -
i need have made style switcher, cannot work out how replace stylesheet, @ moment code empties <head>
need replace previous stylesheet, code,
menu , javascript
<ul id="options"> <li><a class="option" href="<?php echo base_url();?>welcome/setbackground/red">red</a></li> <li><a class="option" href="<?php echo base_url();?>welcome/setbackground/green">green</a></li>
<script type="text/javascript"> $('a.option').click(function(ev) { ev.preventdefault(); var url = $(this).attr("href"); alert(url) $.ajax({ url : url, type : "post", data : "js=true", success : function(html) { $('head').html(html); } }); }); </script>
php
function setbackground() { $data['style'] = $this->uri->segment(3); $_cookie[] = setcookie("style", $data['style'], time()+(60*60*24*30), "/"); //die(print_r($_cookie)); if($this->input->post('js') == "true") { //echo $data['style']; $this->load->view('base/cssselector', $data); } else { redirect(base_url().'welcome'); } }
html javascript , php build
<link rel="stylesheet" href="/media/css/<?php echo $style; ?>.css" media="screen, projection" />
here html page shows example on how add/remove styles dynamically.
<html> <head> <title>add/remove style</title> <script> function removestyle(id){ var cs = document.getelementbyid(id); cs && cs.parentnode.removechild(cs); } function addstyle(css, id){ removestyle(id); var stylenode = document.createelement("style"); stylenode.setattribute('type', 'text/css'); stylenode.setattribute('id', id); document.getelementsbytagname("head")[0].appendchild(stylenode); if(typeof stylenode.stylesheet !=='undefined'){ stylenode.stylesheet.csstext = css; //ie }else{ stylenode.appendchild(document.createtextnode(css)); } } </script> </head> <body> <p>text color</p> <input onclick="addstyle('p{color:#900}p{background:#def}', 'mystyle')" type="button" value="add style" > <input onclick="removestyle('mystyle')" type="button" value="remove style"> </body> </html>
Comments
Post a Comment