[英]Styling :host of Polymer Element with Javascript
I want to style the :host{}
, of a custom Polymer element, with Javascript (dynamically). 我想用Javascript(动态)设置自定义Polymer元素的
:host{}
。 The property I want to style is the "line-height", which will vary depending on the user's screen size (the text will always be on one line). 我要设置样式的属性是“行高”,它将根据用户的屏幕大小而变化(文本将始终在一行上)。
In an attempt to find a sulotion I have used two different methods: 为了找到一种闷热,我使用了两种不同的方法:
The first is with normal jquery: 第一个是正常的jquery:
<dom-module is="custom-element">
<template>
<style>
:host {
position: relative;
display: inline-block;
min-width: 5.15em;
min-height: 2em;
padding: 0.5em;
background: transparent;
font-size: 1.3em;
outline: none;
cursor: pointer;
color: #ABCFCA;
text-transform: uppercase;
text-align: center;
overflow: hidden;
}
</style>
<content></content>
</template>
<script>
Polymer({
is: "custom-element",
properties: {
},
ready: function() {
$(this).css("line-height", $(this).height() + "px");
}
});
</script>
The second method I tried is using Polymer's custom css properties: 我尝试的第二种方法是使用Polymer的自定义css属性:
<dom-module is="custom-element">
<template>
<style>
:host {
position: relative;
display: inline-block;
min-width: 5.15em;
min-height: 2em;
padding: 0.5em;
background: transparent;
font-size: 1.3em;
outline: none;
cursor: pointer;
color: #ABCFCA;
text-transform: uppercase;
text-align: center;
overflow: hidden;
line-height: --dynamic-line-height;
}
</style>
<content></content>
</template>
<script>
Polymer({
is: "custom-element",
properties: {
},
ready: function() {
this.customStyle['--dynamic-line-height'] = $(this).height();
this.updateStyles();
}
});
</script>
In the first method (plain jquery) when inspecting the element with Chrome's Element Inspector the line-height
property isn't even added/set, and the text remains at the default vertical position 在使用Chrome的Element Inspector检查元素时的第一种方法(普通jquery)中,甚至没有添加/设置
line-height
属性,并且文本保持在默认的垂直位置
The second method ends up the same as the first method (no change/result in the element's style) 第二种方法最终与第一种方法相同(元素样式没有变化/结果)
It should be noted that console.log($(this).height());
应该注意
console.log($(this).height());
produces the expected result of 32px
(on my screen) 产生
32px
的预期结果(在我的屏幕上)
It would be awesome if someone can help me either fix/edit any of my existing methods or provide me with a method that they have used/is documented somewhere. 如果有人可以帮助我修复/编辑我现有的任何方法,或者为我提供他们已经使用/记录在某处的方法,那将是非常棒的。
Thank You. 谢谢。
Your CSS in the 2nd example only uses a CSS variable but doesn't declare one. 第二个示例中的CSS仅使用CSS变量,但未声明一个。 Declare one first like:
首先声明一个像:
<style>
:host {
--dynamic-line-height: 1px;
....
line-height: var(--dynamic-line-height);
}
</style>
...
ready: function() {
var height = Polymer.dom(this).node.offsetHeight + 'px';
this.customStyle['--dynamic-line-height'] = height;
this.updateStyles();
}
See also Changing CSS variables via JS in Polymer 另请参阅在Polymer中通过JS更改CSS变量
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.