Question

我在许多HTML文件中都有以下代码：

$("table.altRow tr:odd").css("background-color", "#eeecec");
$("table.altRow tr:even").css("background-color", "#ffffff");

如何更改此设置，以便在一个地方定义颜色，因此如果我想更改它，我只需要更改一次（而不是每一页）。我有一个要求是我有时删除行（然后再次调用此代码以“重置”alt行颜色。我需要继续工作

（注意：我正在动态执行此操作，因此我无法摆脱此jquery代码并完全替换为css）。

例如，我经常删除行，然后运行上面的代码以保持备用行数据的准确性。

Answer 1

好的，将我的答案与其他人的答案结合起来，希望能够解决完整的解决方案：

1）将规则添加到external css stylesheet（例如，使用以下内容制作名为style.css的文件：）

.lowlight { 
background-color: #eeecec;
}

.highlight { 
background-color: #fff;
}

2）要链接到样式表，这需要位于HTML文档的<head>中：

<link rel="stylesheet" type="text/css" href="/path/to/your/style.css" />

3）最后，将样式分配给相关的表行：

$("table.altRow tr:even").addClass("lowlight");

您可能还需要删除旧类，例如

$("table.altRow tr:even").addClass("lowlight").removeClass("highlight");

Answer 2

使用类似

的类

.color1 { background-color : #eeecec; }
.color2 { background-color : #ffffff; }

在JS中使用.addClass()，

   $("table.altRow tr:odd").addClass("color1");
   $("table.altRow tr:even").addClass("color2");

这背后的优势在于，如果您不想要它，可以使用.removeClass()删除颜色。

Answer 3

您可以拥有一个通用的JS文件，该文件在每个其他JS文件之前加载，并声明一些唯一的全局范围的变量，您应该避免在后续的子JS文件中重写：

<强> autoload.js

var glob_unique_odd_tr = '#eeecec';
var glob_unique_even_tr = '#ffffff';

<强> yourjsfile.js

$(document).ready(function(){
    $("table.altRow tr:odd").css("background-color", glob_unique_odd_tr );
    $("table.altRow tr:even").css("background-color", glob_unique_even_tr );
});

您的HTML文件JS从现在开始加载订单

<script type="text/javascript" src="autoload.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="yourjsfile.js"></script>

Answer 4

您可以在PHP中定义变量/常量并生成PHP CSS文件（即：myCSS.php）

以下是一个例子：

PHP / CSS（单个文件）

<?php 
    header("Content-type: text/css; charset: UTF-8"); 
    $main_color = "#00bfff"; #sky light blue
    $secondary_color = "#FFF"; #white
?>

html{
    background-color:#DDD;
    font-family: "Open Sans", Arial, sans-serif;
}

h1 {
    color: <?php echo $main_color;?>;
}

div {
    border-color: <?php echo $main_color;?>;
}

altRow tr:nth-child(even) {
    background-color: <?php echo $secondary_color;?>;
}

您可以像在任何常规CSS文件中一样获取HTML文件中的文件。

如何将这种jquery样式颜色集中到css中？

4 个答案: