Html CSS-如何在页面加载时自动导航到页面上的颜色_Html_Css

Html CSS-如何在页面加载时自动导航到页面上的颜色

html css

Html CSS-如何在页面加载时自动导航到页面上的颜色,html,css,Html,Css,我有一个我每天工作的页面，我需要在页面中查找包含以下HTML的文本： <tr style="background-color:#33FF00"> 当页面加载时，如何使用CSS自动导航到该颜色或HTML代码？有办法吗我不能编辑html，因为它不是本地托管的，我没有写权限，只有读权限。我目前正在使用Stylebot修改css以用于我自己的显示目的，我想知道我是否可以自动导航到该彩色部分如果有一种类似于使用style bot的方法，但是对于像用户脚本之类的HTML，我还不太熟悉，

我有一个我每天工作的页面，我需要在页面中查找包含以下HTML的文本：

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

当页面加载时，如何使用CSS自动导航到该颜色或HTML代码？有办法吗

我不能编辑html，因为它不是本地托管的，我没有写权限，只有读权限。我目前正在使用Stylebot修改css以用于我自己的显示目的，我想知道我是否可以自动导航到该彩色部分

如果有一种类似于使用style bot的方法，但是对于像用户脚本之类的HTML，我还不太熟悉，所以如果您有解决方法，任何教程都可以向我展示如何实现它

谢谢

更新

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

这段代码将目标页面从主机加载到“result”元素中，然后使用一些post-load 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>

从及

更新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右键单击搜索结果中第一个高亮显示的元素，然后选择“滚动到视图中”

试试看这是否奏效：

* { 显示：无 } [样式*=背景色：33FF00]{ 显示：表格行

}尝试查看该部分是否有id，然后将其添加到页面的url中。CSS ID以url开头，url如下所示：mycolwebsite.com/mycolidas您提供的HTML行不包含ID，您无法自动导航到该元素。如果您熟悉它，您可以使用TamperMonkey或GreaseMonkey在每个元素上插入ID，然后使用它导航到，但这有点复杂。不幸的是，它没有ID。只是我不太熟悉在每个元素上添加ID的用户脚本。另外，每次刷新时，彩色文本的实际位置都不同，因此每次加载页面时，彩色文本的位置都不相同。您是否需要页面上的其他内容或仅此一个元素？这是一个元素，但有许多结果是绿色的，我将进行检查。我的主要请求是导航到第一个具有TR样式的绿色结果，或者导航到最后一个。然后，我可以加快检查该页面的过程。谢谢，我只是使用源代码as尝试了此操作，但无法加载。我在桌面上的同一个文件夹中有1.html和jquery.min.js，但当我加载html页面时，它只是一个空白屏幕。您是否修改了sourceUrl变量以匹配您的目标URL？我注意到，我复制/粘贴的颜色不是小写。我将进行相应的编辑。是的，我将sourceURL更改为，并尝试了我所处理的网站页面，但它仍然是一个空白页面。我看到您有一个跨源请求，所以我添加了代码段以允许该请求。