Question

说我有这段代码:(或访问此codepen link）

<script src="https://www.polymer-project.org/webcomponents.js"></script>

<link rel="import" href="https://www.polymer-project.org/components/core-scaffold/core-scaffold.html">

<style>

  body {
    font-family: sans-serif;
  }

  core-scaffold {

  }

  core-header-panel {
    float: left;
    height: 400px;
  }

  .core-header {
    height: 64px;
    line-height: 60px;
    font-size: 18px;
    padding: 0 10px;
    background-color: #FF66CC;
    color: #FFF;
    transition: height 0.2s;
  }

  .core-header-content {
    padding: 20px;
  }

  .main-menu {
    background: transparent;
  }

  .search {
    position: static;
    border: 0;
    padding: 0;
    display: inline-block;
  }

  .search core-icon {
    display: inline-block;
  }

  .search input {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    position: static;
    display: inline-block;
  }

</style>

<core-scaffold responsiveWidth="9999px">

  <core-header-panel mode="seamed" navigation flex>
    <core-toolbar>
      <span flex>Title</span>
      <core-icon-button icon="refresh"></core-icon-button>
      <core-icon-button icon="add"></core-icon-button>
    </core-toolbar>
    <core-menu>
      <core-item label="One"></core-item>
      <core-item label="Two"></core-item>
    </core-menu>
  </core-header-panel>

  <core-toolbar class="main-menu" tool flex>
    <span flex>Title</span>
    <core-icon-button icon="settings" on-tap="{{settingsAction}}"></core-icon-button>
  </core-toolbar>

  <div class="core-header-content">

  </div>
</core-scaffold>

如何引用#menuButton核心图标按钮（由core-scaffold自动生成）将'icon'的属性值从'menu'更改为'apps'？< / p>

这可能是我忽略的事情，并提前感谢。

Answer 1

找到答案：

document.addEventListener('polymer-ready', function(e) {
  $('core-scaffold::shadow #drawerPanel #headerPanel core-toolbar #menuButton').attr('icon','apps');
});

阴影根中的引用元素

1 个答案: