☰

我可以在‘检查元素’中添加或更改 HTML 吗？

tag-icon • tag-icon html templates
我可以在‘检查元素’中添加或更改 HTML 吗？

我可以在“检查元素”中添加或更改 HTML 吗？我有一个“主页”链接按钮，我想修改该链接。我使用了右键单击选项，但我的更改未保存？

答案1

你没有说你使用的是什么浏览器，但如果是 Chrome，那么答案是肯定的。

选择元素后，右键单击并选择“编辑 HTML”

但请注意，这不会保存网站或其他任何内容，它只会编辑您的本地副本。如果您刷新页面，它将恢复到原来的状态。 替代文本

答案2

正如其他人所说，您可以使用 更改链接Inspect Element，但下次页面加载时不会保存更改。

如果您希望每次打开页面时链接都改变，您可以Greasemonkey根据您使用的浏览器使用 或其他类似的插件。（对于 Firefox，您可以使用Greasemonkey）。

这是一个Greasemonkey可以完成您想要的操作的脚本：

// ==UserScript==
// @name        Test-SU-236831-edit-link
// @namespace   Test-SU
// @description Test-SU-236831-edit-link
// @include     http://superuser.com/questions/236831/*
// @include     http://www.superuser.com/questions/236831/*
// @version     1
// @grant       none
// ==/UserScript==

  var GMnode,GMelID,GMmsg="";
  GMelID="nav-questions";
  GMnode=document.getElementById(GMelID);
  if((GMnode!==null)&&(GMnode.hasAttribute("href"))){
    GMmsg="OLD getAttribute-href="+GMnode.getAttribute("href")+"\n";
    GMnode.setAttribute("href","http://www.google.com/");
    GMmsg=GMmsg+"NEW getAttribute-href="+GMnode.getAttribute("href");
    alert(GMmsg);
  }
  else{
    alert("Can't find <a> element with id='"+GMelID+"'");
  }

上述脚本包含一些“调试”语句，因此您可以看到页面加载时发生的情况。以下是没有“调试”语句的相同脚本：

// ==UserScript==
// @name        Test-SU-236831-edit-link
// @namespace   Test-SU
// @description Test-SU-236831-edit-link
// @include     http://superuser.com/questions/236831/*
// @include     http://www.superuser.com/questions/236831/*
// @version     1
// @grant       none
// ==/UserScript==

  var GMnode,GMelID;
  GMelID="nav-questions";
  GMnode=document.getElementById(GMelID);
  if((GMnode!==null)&&(GMnode.hasAttribute("href"))){
    GMnode.setAttribute("href","http://www.google.com/");
  }

如果您不熟悉Greasemonkey，要使用上述脚本，您必须先安装Greasemonkey附加组件，然后将上述脚本添加为新的User Script。

您可以将@name、@namespace和@description字段更改为您想要的任何字符串，以唯一地标识User Script。

将字段更改@include为，以标识您希望对其采取行动的 URL User Script。您可以有多个@include字段。

Greasemonkey将在文档“就绪”后运行并作用于网页，即在<Body>加载整个页面（包括 和所有外部脚本）之后，但在加载页面资源（如图像和一些动态加载的脚本）之前。您可以采取一些步骤来确保 等待Greasemonkey所有其他资源加载后再运行代码。您可以通过添加 来在事件eventlistener后执行代码来做到这一点onload。在大多数情况下，这不是必需的，但如果它是针对您的目标网页，以下是该Greasemonkey脚本：

// ==UserScript==
// @name        Test-SU-236831-edit-link
// @namespace   Test-SU
// @description Test-SU-236831-edit-link
// @include     http://superuser.com/questions/236831/*
// @include     http://www.superuser.com/questions/236831/*
// @version     1
// @grant       none
// ==/UserScript==

  if (window.addEventListener) {
    window.addEventListener('load', readytogo, false);
  }
  else {
    if (window.attachEvent) {
      window.attachEvent('onload', readytogo);
    }
  }

  function readytogo() {
    var GMnode,GMelID;
    GMelID="nav-questions";
    GMnode=document.getElementById(GMelID);
    if((GMnode!==null)&&(GMnode.hasAttribute("href"))){
      GMnode.setAttribute("href","http://www.google.com/");
    }
  }

相关内容