动态改变 :after pseudo background-color

Question

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

    <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 pseudo 以在该按钮的背景中创建彩色背景滑动

.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 content 的颜色，基于项目的边界动态地更改内容。

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

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 方法，但不成功。我无法创建 diffrente css 类硬编码，因为可以为不同的项目选择任何颜色

Answer 1

也许您可以只向按钮添加 extra/different class 而不是尝试添加内联样式？请参阅下面的示例（没有 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";
    }
}

Answer 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 造型是客户的工作。不要让您的服务器因冗余调用而超载。

Answer 3

假设 currentItem.BackColor 已经格式化为 CSS 颜色字符串，这应该有效：

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

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

Answer 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}");

    }
}

动态改变 :after pseudo background-color

Dynamically change :after pseudo background-color

c#

css

asp.net

code-behind

asprepeater