Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/php/234.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Php 我创建了一个CSS切换器,但我只需要更改class=”的元素;“红色”;身体_Php_Javascript_Jquery_Html_Css - Fatal编程技术网

Php 我创建了一个CSS切换器,但我只需要更改class=”的元素;“红色”;身体

Php 我创建了一个CSS切换器,但我只需要更改class=”的元素;“红色”;身体,php,javascript,jquery,html,css,Php,Javascript,Jquery,Html,Css,我创建了一个CSS切换器,但我只需要使用class=“red”更改主体的元素。我怎么做 <html> <head> <jdoc:include type="head" /> <link href="style.css" rel="stylesheet" type="text/css" /> <script src="/js/modernizr-2.0.6.custom.min.js"&g

我创建了一个CSS切换器,但我只需要使用
class=“red”
更改
主体的元素。我怎么做

<html>
    <head>
        <jdoc:include type="head" />
        <link href="style.css" rel="stylesheet" type="text/css" />
        <script src="/js/modernizr-2.0.6.custom.min.js"></script>
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script src="/js/jquery.cookies.2.2.0.min"></script>
    </head>
    <body class="front">
        <select class="style-change">
            <option value="red">Red</option>
            <option value="blue">Blue</option>
            <option value="green">Green</option>
        </select>
        <script>
            $(function(){
                $('.style-change').change(function(){
                    $('link[rel="stylesheet"]')
                        .attr("href", $(this).val() + ".css");
                });
            });
        </script>
    </body>
</html>

红色
蓝色
绿色
$(函数(){
$('.style change').change(函数(){
$('link[rel=“stylesheet”]”)
.attr(“href”,$(this.val()+”.css”);
});
});

演示

您可以使用此更改主体的类

document.body.className="red"

您可以使用它来更改实体的类

document.body.className="red"

如果您更喜欢直接的javascript,Moazzam的答案应该可以做到这一点。如果您更喜欢使用jQuery,可以使用:

$('body').removeClass().addClass('red');
或者,为了将其概括为与下拉列表一起使用,如下所示:

$(function(){
    $('.style-change').change(function(){
        $('body').removeClass().addClass($(this).val());
   });
});

如果您更喜欢直接的javascript,Moazzam的答案应该可以做到这一点。如果您更喜欢使用jQuery,可以使用:

$('body').removeClass().addClass('red');
或者,为了将其概括为与下拉列表一起使用,如下所示:

$(function(){
    $('.style-change').change(function(){
        $('body').removeClass().addClass($(this).val());
   });
});

如果您只想更改body标记类,请更新jquery函数:

$('.style-change').change(function(){
    $('body').removeClass();
    $('body').addClass($(this).val());
});

如果您只想更改body标记类,请更新jquery函数:

$('.style-change').change(function(){
    $('body').removeClass();
    $('body').addClass($(this).val());
});

您正在更改每个
href
属性,我认为这不是您最终想要的。假设您希望将
的类相应地更改为您的
值,
$('body').removeClass().addClass($(this.val())
应该这样做。您正在更改每个
href
属性,我认为这不是您最终想要的。假设您希望将
的类相应地更改为您的
值,
$('body').removeClass().addClass($(this.val())应该这样做。