你在尝试这样的事情：

Question

我创建了一个cms主题，它有一些自定义功能，我想在现场演示中显示。基本上我想添加Javascript样式切换器或修改器。我希望用户从复选框或选择标签中选择一些值，所选值应反映在html元素上。例如，

我的页面容器是

<div id="container"> <!--PAGE GOES HERE --> </div>

如果用户在选择此项时单击“配色方案蓝色”，我希望我的容器添加“blue_theme”类

<div id="container" class="blue_theme" > <!--PAGE GOES HERE --> </div>

此外，是否可以像这样直接更改css属性

/* Base property */
#container{
background:red;
}

如果用户在选择此项时点击“配色蓝色”，我想让我的容器

/* Base property */
#container{
background:blue;
}

Answer 1

您也可以使用CSS。写得像这样：

<强> HTML

<input type="radio" name="color" class="red"/> Red
<input type="radio" name="color" class="blue" /> Blue
<div id="container" for>
    choose theme:
</div>

<强> CSS

#container {
    width: 100%;
    height: 500px;
    overflow: auto;
}

.red:checked ~ #container { background: red}
.blue:checked ~ #container  { background: blue }

选中此http://jsfiddle.net/wd6Cr/1/

Answer 2

试试这个：

$(".button").click(function(){
    $("#container").attr('class','custom_class_added');
})

您也可以使用addClass（）和removeClass（），具体取决于您的功能

Answer 3

设置课程而不是更改<div>的ID。特别是因为ID名称中不允许使用空格。

HTML（在更改状态下）

<div id="container" class="custom_class_added">

CSS

#container.custom_class_added{
    background: blue;
}

Answer 4

添加课程addClass()：

$('#container').addClass('custom_class_added');

要更改css，css()：

$('#container').css('color', 'blue');

Answer 5

在onchange事件中使用$('#container).css({'background-color' : 'blue'});。这应该适用于CSS风格部分。
对于要在标记中添加类的部分，请使用$('#container).attr('class', 'custom_class_added');，这会将class属性添加到标记中。

将此代码用于表单元素（如选择框）将如下所示：

<select id="mySelectBox">
    <option value="blue">Blue</option>
    <option value="green">Green</option>
</select>

<script type="text/javascript">
    $(document).ready(function(){
        $("#mySelectBox").change(function(){
            $("#theElementYouWant").css({"background-color" : $("#mySelectBox").val()});
        });
    });
</script>

要使用$('#container).attr('class', 'custom_class_added');代码，您可以将其放在<script></script>代码之间的任何位置。

Answer 6

你在尝试这样的事情：

解决方案1：

<强> HTML：

<div id="container">
    choose theme:
    <input type="radio" name="radio-theme" data-color="red" /> Red
    <input type="radio" name="radio-theme" data-color="blue" /> Blue
</div>

<强>的jQuery

$("#container").find("input[type=radio]").on("change", function(){
    var dataTheme = $(this).data("color");
    $("#container").removeAttr("class");
    $("#container").addClass(dataTheme);   
});

DEMO 1

解决方案2：

<强> HTML：

<div id="container">
    choose theme:
    <input type="checkbox" name="radio-theme" data-color="red" /> Red
    <input type="checkbox" name="radio-theme" data-color="blue" /> Blue
</div>

<强> jQuery的：

$("#container").find("input[type=checkbox]").on("change", function(){    
    var dataTheme = $(this).data("color");    
    if( $(this).is(":checked") ) {        
        $("#container").removeAttr("class");
        $("#container").addClass(dataTheme);         
    } else {
        $("#container").removeAttr("class"); 
    }  
});

DEMO 2

Answer 7

如果你想用jQuery为它添加一个样式，你可以做以下几点：

$('#container').css({
    "background-color" : "blue",
    "color" : "red"
});

或者，您可以在用户点击按钮时为其添加一个类：

<label for="blue_theme">Blue</label>
<input type="checkbox" id="blue_theme"/>
<div id="container"></div>

$("#blue_theme").click(function() {
    $("#container").attr('class', 'blue_theme');
})

ex。）http://jsfiddle.net/charlescarver/jp8UL/

另外，您应该注意，如果您希望样式坚持页面加载，则可能需要设置cookie。我将在GitHub上查看jQuery Cookie。

Answer 8

使用类而不是ID，您的函数和HTML可能如下所示：

HTML：

<ul id="changer">
  <li class="blue">Blue color</li>
  <li class="red">Red color</li>
</ul>
<div id="container"></div>

的jQuery

var $container = $('#container');
$('#changer').on('click', 'li', function(){

  var $this = $(this),
      $color = $this.attr('class');

  $container.removeClass().addClass($color);

});

Answer 9

像这样：http://jsbin.com/EKEYOfEl/4/

HTML ：

<select class="themeSwitch">
    <option value="red">Red</option>
    <option value="blue">Blue</option>
</select>     
<div id="container"> <!--PAGE GOES HERE --> </div>

CSS ：

#container{
    background:red;
    height:100px;
    width:100%;
}

.custom_class_added{
    background:blue !important;
}

JS ：

$(document).on("change", ".themeSwitch", function(){
    var theme = $(this).val();
    if(theme=="red"){     
        $("#container").removeClass("custom_class_added");
    }else if(theme=="blue"){
        $("#container").addClass("custom_class_added");
    }
});

现在通过更改选择框的值，您只需通过切换css类来更改背景颜色。

Answer 10

你可以使用这个纯JavaScript

来做到这一点

colorOption.onchange = function() {
    var colorValue = option[colorOption.selectedIndex].value;
        template.style.background = colorValue;
        template.innerHTML = template.innerHTML;
};

You can use this jsfiddle

Answer 11

使用此：

$('#bluebttn').click(function(){
    $('#container').removeClass().addClass('blue_theme') ;
});

假设

蓝色按钮的ID是#bluebttn

您的蓝色css类的名称是blue_theme

重复其他颜色。

Answer 12

如果您不想添加或删除类而只想更改颜色，则可以尝试此操作。

   $('#yourbutton').click(function(){
        $('#container').css('background-color', 'blue');
    });

如何使用Javascript更改HTML元素的类？

12 个答案:

你在尝试这样的事情：

解决方案1：

DEMO 1

解决方案2：

DEMO 2