我正在为某个平台开发扩展黑暗模式，但我仅限于css和Jquery。我必须将不同的背景图像替换为表单元格中的另一个url。这是非常困难的，因为表格单元格没有类，只在html中。因此我只能根据属性值来替换它们。我对Javascript/Jquery几乎一无所知，但通过搜索，我发现了一些我认为应该工作的代码。希望你能帮助我!
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$( "td[background="https://static6.smart-school.net/themes/default/images/frame_r1_c1.gif"]" ).replaceWith( "<td background="https://raw.githubusercontent.com/matti606/smart-school_dark/main/frame_r1_c1.gif" width="15"><img src="https://static6.smart-school.net/themes/default/images/spacer.gif" height="27" width="15" alt=""></td>" );
</script>
</head>
<body>
<table width="99%" cellspacing="0" cellpadding="0" border="0" align="center" class="margin-top--milli">
<tbody><tr>
<td background="https://static6.smart-school.net/themes/default/images/frame_r1_c1.gif" width="15"><img src="https://static6.smart-school.net/themes/default/images/spacer.gif" height="27" width="15" alt=""></td>
<td background="https://static6.smart-school.net/themes/default/images/frame_r1_c5.gif">
</td>
<td background="https://static6.smart-school.net/themes/default/images/frame_r1_c13.gif" width="15"><img src="https://static6.smart-school.net/themes/default/images/spacer.gif" height="27" alt="" width="15"></td>
</tr>
<tr>
<td background="https://static6.smart-school.net/themes/default/images/frame_r3_c1.gif"><img src="https://static6.smart-school.net/themes/default/images/spacer.gif" height="3" alt="" width="15"></td>
<td bgcolor="#FFFFFF">
<!-- BEGIN content -->
<!-- END content -->
</td>
<td background="https://static6.smart-school.net/themes/default/images/frame_r5_c13.gif"><img src="https://static6.smart-school.net/themes/default/images/spacer.gif" height="3" alt="" width="15"></td>
</tr>
<tr>
<td background="https://static6.smart-school.net/themes/default/images/frame_r7_c1.gif"><img src="https://static6.smart-school.net/themes/default/images/spacer.gif" height="19" alt="" width="15"></td>
<td background="https://static6.smart-school.net/themes/default/images/frame_r7_c3.gif"><img src="https://static6.smart-school.net/themes/default/images/spacer.gif" height="19" alt="" width="3"></td>
<td background="https://static6.smart-school.net/themes/default/images/frame_r7_c13.gif"><img src="https://static6.smart-school.net/themes/default/images/spacer.gif" height="19" alt="" width="15"></td>
</tr>
</tbody></table>
</body>
</html>
这可以实现循环每个td，获得相应的URL并获得frameId(例如:frame_r7_c1.gif)，并将旧URL替换为具有相同id的新URL。
的例子:来自:
- https://static6.smart-school.net/themes/default/images/frame_r1_c1.gif
:
- https://raw.githubusercontent.com/matti606/smart-school_dark/main/frame_r1_c1.gif
jQuery信息:https://developer.mozilla.org/en-US/docs/Glossary/jQuery
各方法:https://api.jquery.com/each/
Attr方法:https://api.jquery.com/attr/
Split方法可以在这里找到:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split
// loop each td
$('tbody > tr > td').each(function() {
// $(this) is meant for each td
let frameBackground = $(this).attr('background'); // this will get the URL of the image
// make this if statement to verify if a background is present
if(frameBackground != undefined) {
// split method will return a array we get the last value of array (ex: frame_r1_c5.gif)
let array = frameBackground.split('/');
let frameId = array[array.length -1];
// and we replace our current background URL with ours + the frameId we got from line above
$(this).attr('background', `https://raw.githubusercontent.com/matti606/smart-school_dark/main/${frameId}`);
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<table width="99%" cellspacing="0" cellpadding="0" border="0" align="center" class="margin-top--milli">
<tbody>
<tr>
<td background="https://static6.smart-school.net/themes/default/images/frame_r1_c1.gif" width="15"><img src="https://static6.smart-school.net/themes/default/images/spacer.gif" height="27" width="15" alt=""></td>
<td background="https://static6.smart-school.net/themes/default/images/frame_r1_c5.gif">
</td>
<td background="https://static6.smart-school.net/themes/default/images/frame_r1_c13.gif" width="15"><img src="https://static6.smart-school.net/themes/default/images/spacer.gif" height="27" alt="" width="15"></td>
</tr>
<tr> <!-- end -->
<td background="https://static6.smart-school.net/themes/default/images/frame_r3_c1.gif"><img src="https://static6.smart-school.net/themes/default/images/spacer.gif" height="3" alt="" width="15"></td>
<td bgcolor="#FFFFFF">
<!-- BEGIN content -->
<!-- END content -->
</td>
<td background="https://static6.smart-school.net/themes/default/images/frame_r5_c13.gif"><img src="https://static6.smart-school.net/themes/default/images/spacer.gif" height="3" alt="" width="15"></td>
</tr><!-- end -->
<tr>
<td background="https://static6.smart-school.net/themes/default/images/frame_r7_c1.gif"><img src="https://static6.smart-school.net/themes/default/images/spacer.gif" height="19" alt="" width="15"></td>
<td background="https://static6.smart-school.net/themes/default/images/frame_r7_c3.gif"><img src="https://static6.smart-school.net/themes/default/images/spacer.gif" height="19" alt="" width="3"></td>
<td background="https://static6.smart-school.net/themes/default/images/frame_r7_c13.gif"><img src="https://static6.smart-school.net/themes/default/images/spacer.gif" height="19" alt="" width="15"></td>
</tr><!-- end -->
</tbody></table>
</body>
</html>