javascript - 向网页添加 javascript 函数

Question

我一直在制作一些简单的 chrome 扩展，一切都很顺利，使用一些 javascript 在网页上编辑 html 非常简单。现在，当我想添加一些 JavaScript 函数时，问题就开始了，例如切换某个 div 等。这是我的代码

{
"name":"Warmane",
"description":"Some modifications to warmane forum.",
"version":"1.2",
"manifest_version":2,

"content_scripts": [
    {
      "matches": ["http://forum.warmane.com/*"],
      "js": ["myscript.js"]

    }
  ]
}

内容脚本

//Creating Elements

//Adding lates post button  
var nodeLi = document.createElement("LI");  
nodeLi.setAttribute("id", "latest_news");
var nodeA = document.createElement("A");               
var content = document.createTextNode("Latest posts");         
nodeA.appendChild(content);  
nodeA.setAttribute("class", "navtab");   
nodeA.setAttribute("href", "http://forum.warmane.com/search.php?do=getnew");    

//Adding mod cp button  
var nodeLiTwo = document.createElement("LI");  
nodeLiTwo.setAttribute("id", "mod_cp");
var nodeATwo = document.createElement("A");               
var contentTwo = document.createTextNode("Mod Cp");         
nodeATwo.appendChild(contentTwo);  
nodeATwo.setAttribute("class", "navtab");   
nodeATwo.setAttribute("href", "http://forum.warmane.com/modcp/"); 
//latest posts               
document.getElementById("navtabs").appendChild(nodeLi);     
document.getElementById("latest_news").appendChild(nodeA); 
//mod cp
document.getElementById("navtabs").appendChild(nodeLiTwo);     
document.getElementById("mod_cp").appendChild(nodeATwo);  

//Editing style 
document.getElementById("page-frame").setAttribute("style", "display: none");
document.getElementsByClassName("above_body")[0].setAttribute("style", "top: 170px");
document.getElementsByClassName("navigation-wrapper")[0].setAttribute("style", "top: 90px");

现在在这个网页上我想编辑我有一个div

<p class="toggle">Toggle</p>
<div id="someDiv"></div>  

每次我点击它时我想显示/隐藏<p> ，我不知道该怎么做。谁能向我解释一下我该怎么做？

Answer 1

这是一个 fiddle :http://jsfiddle.net/4qqxr1dx/

document.getElementsByClassName("toggle")[0].addEventListener("click",    function() { 
var displayed = document.getElementById("someDiv").style.display;
(displayed == "none") ? document.getElementById("someDiv").style.display = "inline" : 
document.getElementById("someDiv").style.display = "none";

});

我向第一个具有“toggle”类的 DOM 元素添加了一个事件监听器。 当您单击它时，它会检查 id 为“someDiv”的元素的显示属性

它将其放入三元运算中(更多信息在这里 -> https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator )

该操作确定是否显示，然后根据“display”属性的当前声明隐藏或显示。