如何将此 jquery 样式颜色集中到 css 中

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

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

我怎样才能改变它，

以便在一个地方定义颜色，所以如果我想改变它，我只需要改变一次（而不是在每个页面上）。我的一个要求是我有时会删除行（然后再次调用此代码以"重置"alt 行颜色。我需要它才能继续工作

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

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

好的

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

1）将规则添加到外部css样式表中（例如，制作一个名为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");

使用这样的类，

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

而在JS中使用.addClass()，

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

这背后的好处是，如果您不需要它，您可以稍后通过使用 .removeClass() .

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

自动加载.js

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

你的文件.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>

您可以在 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;?>;
}

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

相关内容

最新更新

热门标签：