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

How can I change the class of HTML elements with Javascript?

本文关键字：元素 HTML 更改 何使用 Javascript      更新时间：2023-09-26

我创建了一个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;
}
你也可以

用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/

试试这个：

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

你也可以使用 addClass(( 和 removeClass((，具体取决于你的函数

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

HTML (更改状态(

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

.CSS

#container.custom_class_added{
    background: blue;
}

要添加类，addClass((：

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

对于更改 css，css((：

$('#container').css('color', 'blue');
如果你想

用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');
})​

例(http://jsfiddle.net/charlescarver/jp8UL/

另外，您应该注意，如果您希望样式在页面加载时保持不变，则可能需要设置 cookie。我会看看GitHub上的jQuery Cookie。

使用类而不是 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);
});
在

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

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

<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>标签之间的任何位置。

您是否正在尝试这样的事情：

解决方案 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);   
});​

演示 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>​

j查询：

$("#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"); 
    }  
});​

演示 2

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

网页 ： 

<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;
}

简斯 ： 

$(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类来简单地更改背景颜色。

你可以

使用这个纯JavaScript来做到这一点

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

你可以使用这个jsfiddle

使用这个：

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

若

您的蓝色按钮的ID是 #bluebttn

您的蓝色 css 类的名称是 blue_theme

对其他颜色重复此操作。

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

   $('#yourbutton').click(function(){
        $('#container').css('background-color', 'blue');
    });
相关文章：