动态改变：伪背景色之后答案

【问题标题】：Dynamically change :after pseudo background-color动态改变：伪背景色之后
【发布时间】：2021-10-23 15:19:22
【问题描述】：

我正在这样的中继器中创建按钮（简化）：

    <asp:Repeater runat="server" OnItemDataBound="Repeater_Buttons_ItemDataBound">
        <ItemTemplate>
            <telerik:RadButton runat="server" CssClass="myButton" ID="MyButton">
                <ContentTemplate>
                   <...>
                </ContentTemplate>
            </telerik:RadButton>
        </ItemTemplate>
    </asp:Repeater>

这些按钮使用 :after 伪样式来创建在此按钮背景中滑动的彩色背景

.myButton {
    ...
}

   .myButton::after {
        content: "";
        display: block;
        width: 45px;
        height: 45px;
        background-color: var(--myColor);
        position: absolute;
        left: 0;
        top: 0;
        transition: 400ms all;
        z-index: 1;
    }

结果如下所示：

我的问题是，我需要根据项目边界动态更改此 :after 内容的颜色。

我可以访问 ItemDataBound 上的 RadButton，我试图通过 Attributes 更改它但没有成功。

protected void Repeater_Buttons_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
    if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
    {
        var currentItem = (e.Item.DataItem as MyItem);

        var radButton = (e.Item.FindControl("MyButton") as RadButton);

        // whishful function I need:
        radButton.After.BackgroundColor = currentItem.BackColor;

        // or something like 
        radButton.Attributes.Add("style:after", $"background-color: {currentItem.BackColor}");

    }
}

如果不成功，也可以通过 javascript 方法。我无法创建不同的 css 类硬编码，因为可以为不同的项目选择任何颜色

【问题讨论】：

标签： c# css asp.net code-behind asprepeater

【解决方案1】：

也许您可以只向 Button 添加一个额外/不同的类，而不是尝试添加内联样式？请参见下面的示例（没有 Telerik 控件）

<asp:Repeater ID="Repeater_Buttons" runat="server" OnItemDataBound="Repeater_Buttons_ItemDataBound">
    <ItemTemplate>

        <div>
            <asp:LinkButton ID="MyButton" runat="server" CssClass="myButton">LinkButton</asp:LinkButton>
        </div>

    </ItemTemplate>
</asp:Repeater>


<style>
    .myButton,
    .myButtonDynamic {
        background-color: red;
    }

        .myButton::after {
            content: "after";
            background-color: yellow;
        }

        .myButtonDynamic::after {
            content: "after";
            background-color: green;
        }
</style>

然后在ItemDataBound中

protected void Repeater_Buttons_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
    if (e.Item.ItemType == ListItemType.AlternatingItem)
    {
        var radButton = (LinkButton)e.Item.FindControl("MyButton");

        radButton.CssClass = "myButtonDynamic";
    }
}

【讨论】：

【解决方案2】：

恕我直言，您不必覆盖现有的 CSS。你的 CSS 已经有

.myButton::after {
    ...
    background-color: var(--myColor);
    ...
}

所以你只需要改变这个--myColor CSS 变量。即使没有服务器调用。全部在客户端上。

举个简单的例子，纯 JS 可以做到。这样的 JS 动作可以内置到点击处理程序中。

const root = document.documentElement; //get the root element
...
root.style.setProperty('--myColor', someColorForThisMoment);

或者这样的代码可以是 EventListener 的一部分（在每次点击时随机更改 --myColor）：

function random(min,max) {
  const num = Math.floor(Math.random()*(max-min)) + min;
  return num;
}

function getRandomColor() {
  return 'rgb(' + random(0,255) + ', ' + random(0,255) + ', ' + random(0,255) +  ')';
}

const root = document.documentElement;
root.addEventListener('click', e => {
  const newRandomColor = getRandomColor();
  root.style.setProperty('--myColor', newRandomColor);
});

UI 样式是一项客户工作。不要因冗余调用而使您的服务器过载。

【讨论】：

【解决方案3】：

假设 currentItem.BackColor 已经格式化为 CSS 颜色字符串，这应该可以工作：

var radButton = (e.Item.FindControl("MyButton") as RadButton);
radButton.Style["--myColor"] = currentItem.BackColor;

如果是System.Drawing.Color，那么the ColorTranslator.ToHtml method 应该会为您提供所需的字符串。

【讨论】：

【解决方案4】：

你可以只写自定义属性

protected void Repeater_Buttons_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
    if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
    {
        var currentItem = (e.Item.DataItem as MyItem);

        var radButton = (e.Item.FindControl("MyButton") as RadButton);

        radButton.Attributes.Add("style", $"--myColor: {currentItem.BackColor}");

    }
}

【讨论】：