动态改变：伪背景色之后

Posted 2023-02-15

【中文标题】动态改变：伪背景色之后

【英文标题】：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 类硬编码，因为可以为不同的项目选择任何颜色

【参考方案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");