I have a repeater of div's that look a little bit like this:

我有一个div的转发器看起来有点像这样:

<div class="header_div">
    <!-- Content -->
</div>

I want to have the background color of the divs change based on a dynamic property of the content of the div (lets call it the category), but I still want the "header_div" style to be assgined in cases where I dont have a css class for that category. Whats the best way of doing this?

我希望div的背景颜色根据div内容的动态属性而改变(让我们把它称为类别),但我还是希望在我没有css的情况下设置“header_div”样式该类别的类。这是最好的方法吗?

The best way I can think of is to render the category as the "id" of the div and apply styles based on the id, but that strikes me as really messy - standards dictate that the id should uniquenly identify the element on the page and there will definitely be repeats of each category.

我能想到的最好的方法是将类别作为div的“id”呈现并根据id应用样式,但这让我觉得非常混乱 - 标准要求id应该单独识别页面上的元素,肯定会有每个类别的重复。

6 个解决方案

#1

The simple answer would be to use multiple classes for the <div> so that

简单的答案是为

使用多个类

<div class="header_div header_red">
    <!-- Content -->
</div>

<div class="header_div header_green">
    <!-- Content -->
</div>

#2

You're correct about the need for IDs to be unique. There's nothing stopping you from specifying more than one value per class attribute - just separate them with a space.

你对ID的独特性是正确的。没有什么可以阻止你为每个类属性指定多个值 - 只需用空格分隔它们。

<div class="header_div category">
    <!-- Content -->
</div>

Just be careful to check what happens when both classes specify different values for the same style - I can't say whether the first or the second would take precedence.

只要小心检查当两个类为同一样式指定不同的值时会发生什么 - 我不能说第一个或第二个是否优先。

#3

You could supply multiple styles for the div class:

您可以为div类提供多种样式:

<div class="header_div mystyle">
    <!-- Content -->
</div>

I believe styles declared later in the declaration override earlier ones. As long as you ensure your custom styles "shadow" those of the header-div, you can always include the header-div element, and it will only have an effect when any secondary style is absent (or empty).

我相信在声明中稍后声明的样式会覆盖之前的样式。只要您确保自定义样式“shadow”为header-div,您就可以始终包含header-div元素,并且只有在任何辅助样式不存在(或为空)时才会生效。

#4

If it's going to be used repeatedly on the page, it should be a class.

如果它将在页面上重复使用,它应该是一个类。

If it's unique on the page, use an id.

如果它在页面上是唯一的,请使用id。

#5

Without knowing more about your content, can you not use one of the header tags (<h1> etc)?

在不了解您的内容的情况下,您是否可以使用其中一个标题标记(

等)?

You are correct, IDs should be unique and if you want to use the same style more than once then use a class.

你是对的,ID应该是唯一的,如果你想多次使用相同的样式,那么使用一个类。

#6

You can't have duplicate IDs so if you had multiple divs of the same category you would have an issue. Classes should be used when the style needs to be applied for 1 or more items on a single page.

您不能拥有重复的ID,因此如果您有多个相同类别的div,则会出现问题。当需要在单个页面上为一个或多个项目应用样式时,应使用类。

Why not assign the class on databinding of the div based on the category? As your repeater is getting bound, find your div for the item you are binding and assign it.

为什么不根据类别在div的数据绑定上分配类?当你的转发器被绑定时,找到你绑定的项目的div并分配它。

You could also substitute the div for an asp:Panel and use it's onDataBinding method. It should look exactly like your div.

您也可以将div替换为asp:Panel并使用它的onDataBinding方法。它看起来应该与你的div完全一样。

#1