聚合物元素ShadowDOM子节点.动态设置样式属性
聚合物元素ShadowDOM子节点.动态设置样式属性
提问于 2016-06-30 11:48:03
我想知道如何动态地将font-size设置为<paper-textarea> (即从JS而不是CSS设置font-size )。
- 文档中没有字体大小的默认属性。
- 它似乎只能通过混合(不能通过JS改变)来设置。
例如，<paper-textarea>的DOM树如下所示：
<paper-textarea>- ShadowDOM开始
<div><div><div><textarea><--这是实际的文本区域
有没有任何方法可以通过JS锁定shadowDOM中的子节点并直接设置它的样式？
举个例子，这当然是行不通的。
- 我将属性
fontSize绑定到<paper-textarea> - 由于没有为这个特定元素设置属性
fontSize，所以它无法工作。
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link href="paper-input/paper-textarea.html" rel="import">
<link href="paper-button/paper-button.html" rel="import">
<dom-module id="x-example">
<style>
:host {
display: block;
max-width: 320px;
}
</style>
<template>
<paper-textarea label="Textarea" value="{{inputData}}" font-size="{{fontSize}}"></paper-textarea>
<paper-button class="primary" on-tap="incrementFontSize">Increment Font Size</paper-button>
</template>
<script>
HTMLImports.whenReady(function() {
"use strict";
Polymer({
is: "x-example",
properties: {
inputData: {
type: String,
value: "Hello World"
},
fontSize: {
type: Number,
value: 16
}
},
incrementFontSize: function() {
this.set("fontSize", this.fontSize + 4);
}
});
});
</script>
</dom-module>
<x-example></x-example>
理想情况下，我应该设置一个fontSize观察者，并且必须针对<paper-textarea>的子节点，以便在fontSize更改时设置它的样式。
我怎样才能瞄准这些节点？
注：我更喜欢“正式”的方式，如果它存在的话。聚合物规范经常发生变化，脆弱的黑客在更新图书馆时往往会崩溃。
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-06-30 15:32:45
这里有一种方法：
<dom-module id="dynamic-style">
<template>
<style>
:host{
--myfont:10px;
}
paper-textarea{
--paper-input-container-input:{
font-size:var(--my-font);
};
}
</style>
<paper-textarea on-tap="updateStyle"></paper-textarea>
</template>
</dom-module>
<script>
Polymer({
is:"dynamic-style",
properties:{
fontSize:{
type:Number,
value:10
}
},
updateStyle:function(){
var style={'--my-font':this.computeFont()+'px'}
this.updateStyles(style);
},
computeFont:function(){
return this.fontSize+=4;
}
})
</script>动态样式是Polymer当前的一个问题，根据推荐，updateStyles是它工作的唯一方法。
下面是一个基于您的示例的工作片段：
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link href="paper-input/paper-textarea.html" rel="import">
<link href="paper-button/paper-button.html" rel="import">
<dom-module id="x-example">
<style is="custom-style">
:host {
display: block;
max-width: 320px;
}
:root {
--font-size: 12px;
--paper-input-container-input: {
font-size: var(--font-size);
}
}
</style>
<template>
<paper-textarea label="Textarea" value="{{inputData}}"></paper-textarea>
<paper-button class="primary" on-tap="incrementFontSize">Increment Font Size</paper-button>
</template>
<script>
HTMLImports.whenReady(function() {
"use strict";
Polymer({
is: "x-example",
properties: {
inputData: {
type: String,
value: "Hello World"
},
fontSize: {
type: Number,
value: 16
}
},
incrementFontSize: function() {
var style = {
'--font-size': this.computeFont() + 'px'
}
this.updateStyles(style);
},
computeFont: function() {
return this.fontSize += 4;
}
});
});
</script>
</dom-module>
<x-example></x-example>
Stack Overflow用户
发布于 2016-06-30 11:56:52
你可以在你的聚合物中使用普通的javascript，只需写
this.style.fontSize = Number(this.fontSize + 4)+"px"页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38122206
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号