0

メニューアプリを作成しようとしていますが、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 アプリとして実行すると、クリックしても何も起こりません。私は何を間違っていますか？

4

1 に答える 1