Justin Justin - 2 months ago 7
CSS Question

use javascript or css to make paper button noink

So I'm using javascript to generate

paper-buttons
like so:

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);
}
}


So I use
var btn = document.createElement("paper-button");
to create a paper-button. How do I add
noink
or
raised
to this? I'm also willing to use css to style them all, but
--paper-button-raised: true;
in:

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


doesn't work

Answer

You could set noink and raised like any other property on btn:

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>