Question

我想在我点击它时才更改可折叠标题的颜色。

<div class="collapsible-header" onclick="connect()"></div>

我必须在class元素中添加颜色，当我调用“connect”函数时，我真的不知道如何添加它。这可能吗？

谢谢！

尝试以下但未使用

HTML

<div class="collapsible-header" onclick="connect(this)">Robot</div>

在JS中

function connect(element) 
{ 
    element.style.color = 'red';
    if (connection_status == 0)
    { 
        client.connect(options);
    };
}

Answer 1

选择一个新课程并指定要添加的样式，然后执行此操作

$(".collapsible-header").click(function(){
    $(".collapsible-header").toggleClass("NEWCLASS");
});

Answer 2

https://jsbin.com/sojefubudo/edit?html,js,console,output

<div class="collapsible-header" onclick="connect(this)"></div>

在javascript中：

function connect(element) {
  element.style.color = 'red';
}

Answer 3

看看这个小提琴：

https://jsfiddle.net/swarn_singh/9a6djpwp/

<div onclick="this.style.color = 'red'">
Change color with inline javascript
</div>

<div onclick="changeColor(this)">
Change color with javascript function
</div>

<script>
    function changeColor(element){
        element.style.color = 'blue';
    }
</script>

Answer 4

<div class="collapsible-header" onclick="javascript:this.className += ' additionalClass'"></div>

Answer 5

使用ToggleClass获得更好的结果

(function(){
    $("#run").click(()=>{
        //$(this).css('background','yellow');
        $("#run").toggleClass('yellow');
    });
}());

.yellow {
    background: yellow!important;
}

.red {
    background:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="run" class="red" style="position:absolute;height:100px;width:10px;"></div>

更改点击实现时可折叠的颜色

5 个答案: