使用 javascript 或 css 使纸质按钮变黑

Question

所以我正在使用 javascript 生成 paper-buttons，如下所示：

function createButtons(dieDefaults) {
for(var i = 0; i < dieDefaults.length; i++) {
    var btn = document.createElement("paper-button");

    var txt = document.createTextNode(dieDefaults[i]);
    btn.className += "smallButton";
    btn.onclick = function() {
        document.getElementById("sidesInput").value = this.firstChild.nodeValue;
        checkInput(btn);
    }
    btn.appendChild(txt);
    document.getElementById("dieDefaultDiv").appendChild(btn);
}
}

所以我使用 var btn = document.createElement("paper-button"); 创建了一个纸质按钮。如何向其中添加 noink 或 raised？我也愿意使用 css 来设置它们的样式，但是 --paper-button-raised: true; in:

  paper-button{
color: var(--paper-blue-grey-100);
background: var(--paper-indigo-500);
--paper-button-raised: true;}

不起作用

Answer 1

您可以像 btn 上的任何其他属性一样设置 noink 和 raised:

btn.noink = true;
btn.raised = true;

<head>
  <base href="https://polygit.org/polymer+1.7.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="paper-button/paper-button.html">
</head>
<body>
  <script>
    HTMLImports.whenReady(function() {
      var btn = document.createElement('paper-button');
      btn.textContent = 'Hello';
      btn.noink = true;
      btn.raised = true;
      btn.onclick = function() {
        console.log('clicked');
      };
      document.body.appendChild(btn);
    });
  </script>
</body>

使用 javascript 或 css 使纸质按钮变黑

use javascript or css to make paper button noink

javascript

css

polymer

polymer-1.0