Posso adicionar ou alterar HTML quando estiver em "Inspecionar elemento". Eu tenho um botão de link 'Início' que desejo alterar o link. Eu usei a opção de clicar com o botão direito, mas minhas alterações não foram salvas?
Você não diz em qual navegador está, mas, se isso for chrome, a resposta é sim.
Depois de selecionar um elemento, clique com o botão direito e escolha "editar HTML"
No entanto, observe que isso não salvará o site ou qualquer outra coisa, apenas edita sua cópia local. Se você atualizar a página, ela voltará a como estava.
Como outros já disseram, você pode alterar o link usando Inspect Element , mas a alteração não será salva na próxima vez que a página for carregada.
Se você quiser que o link seja alterado sempre que abrir a página, poderá usar Greasemonkey ou outros complementos semelhantes, dependendo do navegador que estiver usando. (Para o Firefox, você poderia usar Greasemonkey ).
Aqui está um script Greasemonkey que deve fazer o que você deseja:
// ==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+"'");
}
O script acima tem algumas instruções de "depuração" para que você possa ver o que está acontecendo quando a página é carregada. Aqui está o mesmo script sem as instruções "debugging":
// ==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/");
}
Caso você não esteja familiarizado com Greasemonkey , para usar o script acima, primeiro instale o complemento Greasemonkey e adicione o script acima como um novo User Script .
Você pode alterar os campos @name , @namespace e @description para as cadeias desejadas para identificar exclusivamente o User Script .
Altere o campo @include para identificar o URL com o qual você deseja que User Script atue. Você pode ter mais de um campo @include .
Greasemonkey será executado e agirá na página da Web depois que o documento estiver "Pronto", ou seja, após a página inteira incluindo o <Body> e todos os scripts externos terem sido carregados, mas antes dos recursos da página, como imagens e alguns carregados dinamicamente scripts são carregados. Há etapas que você pode seguir para garantir que Greasemonkey aguarde o carregamento de todos esses outros recursos antes de executar seu código. Você faria isso adicionando um eventlistener para executar seu código após o evento onload . Na maioria dos casos, isso não será necessário, mas no caso de sua página de destino, aqui está o script Greasemonkey para isso:
// ==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/");
}
}