CSS——如何在页面加载时自动切换到页面上的颜色

I have a page that I work on daily and I need to look through the page for text that has HTML of:

我有一个网页，我每天都在做，我需要在这个页面中查找有HTML的文本:

<tr style="background-color:#33FF00">

How can I use CSS to auto navigate to that color or HTML code when the page loads? Is there a way?

当页面加载时，如何使用CSS自动导航到该颜色或HTML代码?有一种方式吗?

I cannot edit the html as it's not hosted locally and I don't have access to write access, only read. I am currently using Stylebot to modify the css for my own display purposes and want to know if I can do the same to auto navigate to that colored section.

我不能编辑html，因为它不是本地托管的，而且我没有写访问权限，只能读。我目前正在使用Stylebot来修改css，以达到我自己的显示目的，我想知道我是否可以做同样的事情来自动导航到那个有颜色的部分。

If there is a way similar to using style bot but for HTML like userscripts etc, I am not familiar enough so if you have a workaround any tutorial would be great to show me how to implement it.

如果有一种方法类似于使用style bot，但是对于HTML，比如userscripts等等，我不是很熟悉，所以如果你有一个变通的方法，任何教程都会很好地告诉我如何实现它。

Thanks!

谢谢!

2 个解决方案

#1

UPDATED

更新

Copy and paste the code below into a text file and save it as an html file. Then open it in a browser.

将下面的代码复制粘贴到一个文本文件中，并将其保存为一个html文件。然后在浏览器中打开它。

This code loads the target page from the host into the 'result' element, then uses some post-load javascript to navigate to the colored tr elements. If the page requires scripts on external stylesheets, etc., these need to be loaded explicitly.

这段代码将目标页面从主机加载到“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>

from jQuery scroll to element and JQuery Find Elements By Background-Color

从jQuery滚动到元素，jQuery通过背景色找到元素

UPDATE 2

更新2

Or, in an iFrame (but only works if you are on the same domain as the target page)

或者，在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>

UPDATE 3

更新3

If none of these work, try: 1) load your page in a browser, 2) open Developer Tools, 3) go to the Page Inspector or Elements tab, 3) Ctrl-F and search for your color string ('#ddcef2'), 4) right-click the first highlighted element in your search results and select "Scroll into view"

如果这些都不行，那么试试:1)在浏览器中加载页面，2)打开开发人员工具，3)到页面检查器或元素选项卡，3)Ctrl-F，搜索颜色字符串('#ddcef2')， 4)右键单击搜索结果中第一个突出显示的元素，选择“滚动到视图”

#2

Try and see if that does the trick:

试着看看这是否奏效:

* {
  display: none
}
[style*=background-color:#33FF00] {
  display: table-row
}

#1