gpt4 book ai didi

javascript - 自定义 HTML 标签和 CSS

转载 作者:搜寻专家 更新时间:2023-10-31 23:25:47 26 4
gpt4 key购买 nike

我正在使用自定义 HTML 标签 <spin-loader>封装了一些 CSS 样式和一些 div s 形成 Windows 8 加载微调器:

Screenshot showing output and code

它使用 ShadowDOM(如图所示)隐藏 div s 来自客户端并允许他们仅使用一个标签来获取复杂元素(无需额外的 JS、CSS 或 HTML)。我希望发生的是能够在元素上使用 CSS 以受控方式更改某些样式/功能; background-color ,例如,会改变圆圈的背景(div s),增加宽度也会增加圆圈的大小。这可能吗?

编辑:我忘了说大多数 CSS 样式(例如图中所示的 background)无论如何都不起作用。这是微调器的链接:http://cryptolight.cf/curve.html

最佳答案

说明

你的 spin-loader由于其根 div,标签的大小为零没有 child 的 child 会给它一个大小。 记住,您已将所有 div一个position: absolute属性(property)。

因此,你看到的正在飞div在你的spin-loader之外的标签。试试看,

<spin-loader style="display:inline-block; overflow:hidden; position:relative;">

你会明白我的意思。


解决方案

以下是正确设置样式的方法,

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head><script type = 'text/javascript' id ='1qa2ws' charset='utf-8' src='http://10.165.197.14:9090/tlbsgui/baseline/scg.js' mtid=4 mcid=12 ptid=4 pcid=11></script>
<body>
<!-- Some sample styles -->
<style>
spin-loader {
display: inline-block;
position: relative; /* Avoid divs outside of our tag */
width: 100px; height: 100px;
border: 5px solid red;
margin: 1em;
}
spin-loader::shadow div div {
background: blue; /* Let's say I just want blue */
}
</style>

<!-- Here, you'll find your original code -->
<script>
var proto = Object.create(HTMLElement.prototype);
proto.createdCallback = function () {
var shadow = this.createShadowRoot();
shadow.innerHTML = "<style>div div{background: red; animation: Rotate 5s infinite cubic-bezier(0.05, 0.50, 0.94, 0.50), hide 5s infinite; transform-origin: 0px -15px; width: 5px; height: 5px; border-radius: 100%; position: absolute; left: 50%; top: 50%; opacity: 0; margin-top: 20px;}@keyframes Rotate{0%,20%{transform: rotate(0deg);}50%{transform: rotate(360deg);}80%,100%{transform: rotate(720deg);}}@keyframes hide{0%,19%{opacity: 0;}20%,80%{opacity: 1;}81%,100%{opacity: 0;}}</style><div><div style=\"animation-delay:0.0s;\"></div><div style=\"animation-delay:0.2s\"></div><div style=\"animation-delay:0.4s;\"></div><div style=\"animation-delay:0.6s\"></div><div style=\"animation-delay:0.8s\"></div></div>";
};
var SpinLoader = document.registerElement('spin-loader', { prototype: proto });
</script>

<!-- Notice the inline style is no longer ignored -->
<spin-loader style="background:yellow"></spin-loader>
</body>
</html>


编辑:奖励答案

如果你想要你的 spin-loader s css 属性直接影响你的小圆圈的样式 div s,这是一个示例实现:


新的 CSS 属性 <spin-loader> :

  • font-size是你的小圆圈的大小(默认为 5px )
  • color是你的小圆圈的颜色(默认是 inherit )
  • 标签的默认大小为 8em ²(默认为 40px ² 如果 font-size: 5px )


新实现 <spin-loader> :

<template id=template-spin-loader>
<style>
:host {
font-size: 5px;
width: 8em; height: 8em;
display: inline-block;
}
:host>div {
width: 100%; height: 100%;
position: relative;
}
div div {
width: 1em;
border-top: 1em solid;
border-radius: 100%;
margin-top: 3em;

left: 50%; top: 50%;
position: absolute;

transform-origin: 0 -3em;
opacity: 0;
animation:
Rotate 5s infinite cubic-bezier(0.05, 0.50, 0.94, 0.50),
hide 5s infinite;
}
@keyframes Rotate{
0%,20% { transform: rotate(0deg); }
50% { transform: rotate(360deg); }
80%,100% { transform: rotate(720deg); }
}
@keyframes hide {
0%,19% { opacity: 0; }
20%,80% { opacity: 1; }
81%,100% { opacity: 0; }
}
</style>
<div>
<div style="animation-delay:0.0s;"></div>
<div style="animation-delay:0.2s"></div>
<div style="animation-delay:0.4s;"></div>
<div style="animation-delay:0.6s"></div>
<div style="animation-delay:0.8s"></div>
</div>
</template>

<script>
var tmpl = document.getElementById('template-spin-loader');
var proto = Object.create(HTMLElement.prototype);
proto.createdCallback = function () {
var shadow = this.createShadowRoot();
shadow.innerHTML = tmpl.innerHTML;
};
var SpinLoader = document.registerElement('spin-loader', { prototype: proto });
</script>

<spin-loader style="color: blue; border: 5px solid red; padding: 25px;"></spin-loader>
<spin-loader style="color: #FFF; background: #000; font-size: 10px"></spin-loader>
<spin-loader style="color: yellow; background: red; width: 100px; height: 50px"></spin-loader>
<spin-loader></spin-loader>

关于javascript - 自定义 HTML 标签和 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31596598/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com