应用特定的CSS元素

本文关键字:CSS 元素 应用 | 更新日期: 2023-09-27 18:08:43

我使用的是Telerik rad的组织结构图。基本上,我想基于条件应用特定的CSS样式。

我已经想出了如何重写css样式:

.rocToolbar_Metro .rocToolbarButton {   background-color: #32b330 !important;}

但是我不知道如何通过后面的代码有条件地做到这一点,所以说如果condition == 1然后应用这个:

.rocToolbar_Metro .rocToolbarButton {    background-color: #32b330 !important;}

.rocToolbar_Metro .rocToolbarButton {    background-color: #25a0da !important;}

我计划在NodeDataBound事件中这样做。欢迎提出建议。

谢谢。

应用特定的CSS元素

在你的页面上添加JS,这将改变按钮的颜色,接下来你可以使用ScriptManager从nodedatabound事件中触发这个javascript。

添加JS

function setColor1() {
    $("#rocToolbarButton").css("background-color","#25a0da");
}

NodeDataBound事件

protected void RadTreeView_OnNodeDataBound(object sender, RadTreeNodeEventArgs e)
{ 
    ScriptManager.RegisterStartupScript(this, GetType(), "setColor1", "setColor1();", true);
}

您也可以添加css属性,而无需编写新的类来覆盖实际的

$(document).ready(function(){
  var condition = 1;
  if(condition == 1){
    $('.rocToolbarButton').css('background-color', '#32b330;');
  }
  else{
    $('.rocToolbarButton').css('background-color', '#25a0da;');
  }
});

操作如下:

$('cssSelector').css('property','value');