我需要使用javascript对数字 2 应用一种css样式。如何使用以下html中的javascript来完成此操作。
<tfoot>
<tr class="pp-pagenumber">
<td colspan="1">
<a data-swhglnk="true" href="#"><</a>
<a data-swhglnk="true" href="#">1</a>
2
<a data-swhglnk="true" href="#">3</a>
<a data-swhglnk="true" href="#">4</a>
<a data-swhglnk="true" href="#">></a>
</td>
</tr>
</tfoot>
最后它将如下图所示
根据Govan建议我将其改为纯css。但现在它看起来像
答案 0 :(得分:1)
纯CSS修复:
试试这个,让我知道它是否有效。
a::after {
content: "*";
background: white;
color: white;
}
a::before {
content: "*";
background: white;
color: white;
}
a {
background: grey;
margin-right: -4px;
margin-left: -4px;
}
td {
background: green;
display: inline;
}
答案 1 :(得分:1)
为什么你需要JS? 纯CSS应该可以解决问题:
tr.pp-pagenumber td {color : red;}
tr.pp-pagenumber td a {color : black;}
答案 2 :(得分:1)
由于要设置样式的数字2
不在任何标记内,因此很难对该元素进行样式设置。您可以过滤类型为3的节点,这些节点指示文本节点并将其包装在具有指定类名的标记中。然后,您可以使用该类名称
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<table>
<tfoot>
<tr class="pp-pagenumber">
<td colspan="1">
<a data-swhglnk="true" href="#"><</a>
<a data-swhglnk="true" href="#">1</a>
2
<a data-swhglnk="true" href="#">3</a>
<a data-swhglnk="true" href="#">4</a>
<a data-swhglnk="true" href="#">></a>
</td>
</tr>
</tfoot>
</table>
<script>
$(document).ready(function(){
$('tr.pp-pagenumber td').contents().filter(function() {
return this.nodeType === 3;
}).wrap('<a class="currentPage"></a>');
/*You can remove the blank nodes if exists by */
$(".currentPage").each(function(){
if($(this).html().trim()=="")
$(this).remove();
});
});
</script>
<style>
.currentPage {
background-color : green ;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<table>
<tfoot>
<tr class="pp-pagenumber">
<td colspan="1">
<a data-swhglnk="true" href="#"><</a>
<a data-swhglnk="true" href="#">1</a>
2
<a data-swhglnk="true" href="#">3</a>
<a data-swhglnk="true" href="#">4</a>
<a data-swhglnk="true" href="#">></a>
</td>
</tr>
</tfoot>
</table>
<script>
$(document).ready(function(){
$('tr.pp-pagenumber td').contents().filter(function() {
return this.nodeType === 3;
}).wrap('<a class="currentPage"></a>');
$(".currentPage").each(function(){
if($(this).html().trim()=="")
$(this).remove();
});
});
</script>
<style>
.currentPage {
background-color : green ;
}
</style>
&#13;
答案 3 :(得分:0)
试着看看这个: JavaScript wrapping unwrapped plain text
也许这可以帮助你,有解决方案你怎么能包装这个简单的&#34; 2&#34;使用JS。
然后你可以根据需要设计它。
答案 4 :(得分:0)
为数字添加一个onclick函数,在onclick函数中只需向该按钮添加一个类。写下你曾经写过的css代码。
我认为这对你有用。
controllers