个人中心
gpt4 book ai didi

javascript - 样式切换器帮助

转载 作者：行者123 更新时间：2023-11-27 22:37:00 24 4
gpt4 key购买 nike

我需要一些帮助，我制作了一个样式切换器，但我不知道如何替换样式表，目前我的代码清空了 <head>我需要它来替换以前的样式表，这是我的代码，

菜单和 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');
    }
}

javascript 和 PHP 构建的 HTML

<link rel="stylesheet" href="/media/css/<?php echo $style; ?>.css" media="screen, projection" />

最佳答案

这是一个 HTML 页面，显示了如何动态添加/删除样式的示例。

<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 to 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>

关于javascript - 样式切换器帮助，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2092771/

24 4 0
文章推荐： css - 完美中心的内容栏，附有左右栏
文章推荐： css - 用 960 创建固定宽度？
文章推荐： html - 如何获得最小宽度或类似的东西以在整个页面上工作？ IE7 和 8
文章推荐： css - 帮助解决 IE 中的布局问题
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com