javascript - 创建一个复选框，用于注释 CSS 行

Question

所以我想做的是当用户选中复选框时将边框半径添加到 div 并在未选中复选框时将其删除 这是我的代码的样子:

html:

<div id='box'></div>

添加边框半径

CSS:

#box {
    height:300px;
    width:300px;
    background-color: #444;
    float:right;
}

Answer 1

使用 jQuery 非常简单。

像这样定义一个 CSS 类...

.br{
    border-radius : 5px;
    -moz-border-radius : 5px;
    -webkit-border-radius : 5px;
    -o-border-radius : 5px;
}

如果你的复选框看起来像这样

<input type="checkbox" id="cb"/>

那么你的 JS 代码应该是这样的......

<script>
$(function(){
    $("#cb").on("click", function(){
        $("#box").toggleClass("br");
    });
});
</script>