根据元素中的值将css分配给元素
根据元素中的值将css分配给元素
提问于 2015-06-05 19:37:32
我正在开发一个web应用程序，作为一个表，有一些数据的列。特别是我有一个名为Change的列，它下面绑定了一些数据，如下所示
<td data-bind="text: GradeName"></td>
<td data-bind="text:Price"></td>
<td data-bind="text:Change"></td>Change的值可以是负的，也可以是正的，但是如果它是负的，我希望这个值以红色或黑色显示。
我能知道一个好办法吗？
回答 3
Stack Overflow用户
回答已采纳
发布于 2015-06-05 20:47:46
没有CSS选择器允许您根据元素的内容来设置样式，所以您不能完全在CSS中这样做。
但是，Knockout可以在绑定数据时为您进行样式设计:您可以使用css绑定或样式绑定。下面是一个样式绑定示例：
<td data-bind="text: GradeName"></td>
<td data-bind="text: Price"></td>
<td data-bind="text: Change, style: { color: Change<0 ? 'red' : 'black' }"></td>现场演示：
ko.applyBindings({ GradeName:"grade", Price:"€100.0", Change:-10, OtherField:10 });<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<table><tr>
<td data-bind="text:GradeName"></td>
<td data-bind="text:Price"></td>
<td data-bind="text:Change, style: { color: Change<0 ? 'red' : 'black' }"></td>
<td data-bind="text:OtherField, style: { color: OtherField<0 ? 'red' : 'green' }"></td>
</tr></table>
Stack Overflow用户
发布于 2015-06-05 20:03:06
你可以这样做：
td[data-bind*="text:Change:-"] { color: red; }
此规则只匹配具有data-bind属性的data-binds，并以text:-开头，表示负数。
CodePen上的实例
Stack Overflow用户
发布于 2015-06-05 20:10:33
如果您想使用jQuery，那么下面是我为您提供的解决方案jsFiddle
jQuery(document).ready(function(){
var dataElem;
jQuery('td').each(function(){
dataElem = jQuery(this);
if(dataElem.data('bind')){
if(dataElem.data('bind').substr(dataElem.data('bind').indexOf(":") + 1) === "Change"){
if(parseInt(dataElem.html()) < 0){
dataElem.css("background-color", "red");
}
}
}
});
});上面的代码假设正/负值将在td元素中找到，td元素被数据属性更改所引用。如果不作其他澄清，我很高兴对这一答复作出修改。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30674478
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号