Chromeapp设置div显示样式答案

【问题标题】：Chromeapp set div display styleChromeapp设置div显示样式
【发布时间】：2016-03-03 13:31:43
【问题描述】：

我正在尝试创建一个菜单应用程序，但在尝试将 div 样式设置为“display:none;”时遇到了一些麻烦。我在 jsfiddle 中运行了代码，它运行良好。这是我的清单：

{
  "manifest_version": 2,
  "name": "MenuProject",
  "short_name": "Menu",
  "description": "",
  "version": "0.0.1",
  "minimum_chrome_version": "38",

  "icons": {
    "16": "assets/icon_16.png",
    "128": "assets/icon_128.png"
  },

  "app": {
    "background": {
      "scripts": ["background.js"]
    }
  }
}

这是我的 background.js：

chrome.app.runtime.onLaunched.addListener(function(launchData) {
  chrome.app.window.create(
    'index.html',
    {
      frame:"none",
      id: 'mainWindow',
      bounds: {width: 300, height: 200}
    }
  );
});

这是我的 index.html：

<body>  <style>
* {
    margin: 0;
    padding: 0;
}

body {
  height:200px;
 background-color: #f3f0ef;
}

.menu-container {
  -webkit-app-region: drag;
  display: block;
  position: relative;
  width: 300px;
  background-color: #f3f0ef;
  padding: 0;
  box-shadow:  inset 0 0 1px rgba(255,255,255,1);
  box-shadow:  5px 5px 15px 1px rgba(0,0,0,0.1);
}

.nav{
  background-color: #ed6b3a;
  height:40px;
 /* border-radius:5px 5px 0 0;*/
}

.settings {
  height:20px;
  float:right;
  background-image:url(http://i.imgur.com/CLs7u.png);
  width:20px;
  margin:10px;
}

.menu ul {
  list-style:none;
}

.menu ul li {
  border-top:1px solid rgba(0,0,0,0.1);
  padding:11px 10px;
  box-shadow:inset 0 1px 1px #fff;
  text-indent:10px;
  }

.menu ul li a {
  font-size:14px;
  color:#a4a3a3;
  font-family: 'Strait', sans-serif;
  font-size:14px;
  text-decoration:none;
  text-shadow: 1px 1px 1px #fff;
}

.menu ul li img {
  float:left;
  margin:-2px 0 0 0;
}
/*
.menu ul li:hover {
  border-left:3px solid #ed6b3a;
  background-color:rgba(0,0,0,0.02);
}*/
</style>

  <script>
//var menumain = document.getElementById('menu');
function openPaste(){
//var menumain = document.getElementById('menu');
document.getElementById('menu').style = "opacity:0;"
//  menumain.style="display:none;";
}
</script>
<link href='http://fonts.googleapis.com/css?family=Strait' rel='stylesheet' type='text/css'>
<div class="menu-container">

  <div class="nav">
      <div class="settings"></div>
  </div>

  <div id="menu" class="menu" style="display:block;">
      <ul>
    <li onclick="openPaste();"><a><img src="http://i.imgur.com/4JPrK.png"><p>Quick Pastebin</p></a></li></button>
    <li><a><img src="http://i.imgur.com/jHwHy.png"><p>Upload</p></a></li>
    <li><a><img src="http://i.imgur.com/Gyusy.png"><p>Location</p></a></li>
    <li><a><img src="http://i.imgur.com/mbWpc.png"><p>Contacts</p></a></li>
  </ul>
  </div>
</div>
</body>

当我在 jsfiddle 中运行它时，单击“打开 Pastebin”按钮可以正常工作。但是当我将它作为 chrome 应用程序运行时，单击它什么也不做。我做错了什么？

【问题讨论】：

标签： javascript html css google-chrome-app chrome-app-developer-tool

【解决方案1】：

Chrome 应用不允许内联脚本。您必须将脚本放入不同的文件中，并在 index.html 中引用该脚本文件。

由于内容安全政策，此代码不会执行。在您的 index.html 中包含任何内联代码都不起作用，包括：

<li onclick="openPaste();">

Read this for better understanding.

【讨论】：

查看控制台是否有任何错误信息。将有。（如果您在开发模式下运行它，您可以通过右键单击打开控制台 -> 在您的 chrome 应用程序窗口中进行检查）。我敢打赌，您没有更改以下部分：<li onclick="openPaste();"> 这是一个内联 javascript，它不会在 chrome 应用程序中运行。相反，你应该给它一个 id，比如“myLi”。并在您的 script.js 文件中为此对象创建一个单击事件侦听器，例如：document.getElementById("myLi").addEventListener("click", function(){ openPaste(); });
等等...它不起作用。我有这段代码，它监听按钮单击并更改表单的值，但它不起作用....document.getElementById("trigger").addEventListener("click", function(){ document.getElementById('urlname').value = 'hi'; });
我不能...我的管理员禁用了 Inspect -_- 我可以将文件发送给您吗？
只需使用新的源代码创建一个新问题。无论如何，如果您想在没有控制台的情况下进行编码，您将很难