Javascript 聚合物：如何动态改变造纸厂尺寸

我尝试动态创建Polymer FAB（），如下所示：

var navFab = document.createElement("paper-fab");
console.log(navFab.mini)       // output false, which means it is defined
navFab.icon = "arrow-forward"; // this works
navFab.mini = true;            // this doesn't work
console.log(navFab.mini)       // output true
document.body.appendChild(navFab);

在屏幕上，navFab按钮的尺寸为正常尺寸，而不是迷你尺寸。我在旁边放了一个标准尺寸的图标只是为了比较。这让我莫名其妙：s

元素使用mini添加样式（宽度，高度=40px），这就是为什么以后无法通过更改属性来调整大小（更改不会自动反映到样式）更改mini use setAttribute。

您也可以通过直接或使用类修改其宽度和高度来调整paper fab的大小

.小{
宽度：25px；
高度：25px；
}
var fab=document.querySelector（'paper-fab'）；
fab.addEventListener（'tap'，function（）{
if（fab.classList.contains（'small'））{
fab.classList.remove（'small'）；
}否则{
fab.classList.add（'small'）；
}
});

---

：父页面中的规则的专用性高于：元素中定义的宿主规则，但低于宿主元素中定义的样式属性。

您不能这样做。阴影DOM的全部目的是防止样式溢出。很抱歉，我在添加class

small

之前无意中添加了class

mini

。你介意为其他人加上这个吗？“父页面中的规则比：元素中定义的宿主规则具有更高的特异性，但比宿主元素中定义的样式属性具有更低的特异性。”此处引述：您知道如何在createElement期间指定属性吗？a、 k.a在createElementfab=document.createElement（'paper-fab'）期间指定mini=true；fab.setAttribute（'mini'，true）；此外，您还可以在当前现有的造纸厂上使用setAttribute应用mini，而无需担心类。

<style>
  .small {
    width: 25px;
    height: 25px;
  }
</style>
<paper-fab icon="add"></paper-fab>
<script>
  var fab = document.querySelector('paper-fab');
  fab.addEventListener('tap', function(){
    if( fab.classList.contains('small') ) {
      fab.classList.remove('small');
    } else {
      fab.classList.add('small');
    }
  });
</script>