我有一个我每天都在处理的页面，我需要查看页面中包含以下 HTML 的文本:
<tr style="background-color:#33FF00">
如何在页面加载时使用 CSS 自动导航到该颜色或 HTML 代码？ 有办法吗？
我无法编辑 html，因为它不是本地托管的，而且我无权写入，只能读取。 我目前正在使用 Stylebot 为我自己的显示目的修改 css，我想知道我是否可以做同样的事情来自动导航到那个彩色部分。
如果有一种类似于使用 style bot 的方法，但对于用户脚本等 HTML，我还不够熟悉，所以如果您有解决方法，任何教程都可以很好地向我展示如何实现它。
谢谢!
最佳答案
已更新
将下面的代码复制并粘贴到文本文件中，并将其另存为 html 文件。然后在浏览器中打开它。
此代码将目标页面从主机加载到“result”元素中，然后使用一些加载后的 javascript 导航到彩色 tr 元素。如果页面需要外部样式表等脚本，则需要显式加载这些脚本。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$.ajaxPrefilter( function (options) {
if (options.crossDomain && jQuery.support.cors) {
var http = (window.location.protocol === 'http:' ? 'http:' : 'https:');
options.url = http + '//cors-anywhere.herokuapp.com/' + options.url;
//options.url = "http://cors.corsproxy.io/url=" + options.url;
}
});
$(document).ready(function(){
var sourceUrl='https://en.wikipedia.org/wiki/Main_Page';
var sourceScript='https://en.wikipedia.org/wiki/Main_Page';
$( "#result" ).load(sourceUrl, function() {
$.getScript(sourceScript, function(){
alert("Script loaded and executed.");
});
$('html, body').animate({
scrollTop: $('tr').filter(function(){
var color = $(this).css("background-color").toLowerCase() || $(this).css("background").toLowerCase() ;
return color === "#33ff00";
}).position().top
}, 100);
});
});
</script>
</head>
<body>
<div id="result"></div>
</body>
</html>
来自 jQuery scroll to element 和 JQuery Find Elements By Background-Color
更新 2
或者，在 iFrame 中(但仅当您与目标页面位于同一域时才有效)
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
function onLoadHandler(){
var $iframe = $("#result").contents();
var trs=$iframe.find('tr');
$iframe.find('html,body').animate({
scrollTop: trs.filter(function(){
var color = $(this).css("background-color").toLowerCase() || $(this).css("background").toLowerCase() ;
return color === "#33ff00";
}).position().top
}, 100);
};
</script>
</head>
<body>
<iframe id="result" src="FRAMESOURCE" style="top:0;left:0;width:100%;height:700px" onload="onLoadHandler();"> </iframe>
</body>
</html>
更新 3
如果这些都不起作用，请尝试:1) 在浏览器中加载您的页面，2) 打开开发人员工具，3) 转到页面检查器或元素选项卡，3) Ctrl-F 并搜索您的颜色字符串 (' #ddcef2'), 4) 右键单击搜索结果中第一个突出显示的元素并选择“滚动到 View ”
关于html - CSS - 如何在页面加载时自动导航到页面上的颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41283966/