[英]HTML Element that mimics another
听起来很疯狂,但我只是想知道我是否可以有一个元素(任何东西,小的或复杂的),然后在其他地方有一个克隆元素,它完全模仿第一个元素上发生的所有变化。
我知道使用 JavaScript 和 jQuery 可以轻松实现类似的功能。 但是,我想到的任何解决方案都涉及每个变量(或独立修改的单独元素实例)
例如
<div class="class"></div>
<div class="class"></div>
<div class="class"></div>
$('.class').css('color','blue');
这段 javascript / jQuery 将选择每个元素实例,并将蓝色分别应用于每个元素。
我想知道的是,如果有一种方法可以改变一个单一的元素,那将反映在元素副本上。
所以克隆元素不会有自己的可以单独更改的属性。 他们从字面上使用原始元素的属性。 当原始元素属性被修改时,克隆也会被修改,因为它们的内部状态引用了原始元素。
这样的构造存在吗?
我的推理是这样的:
如果你有 1000 个元素。 每个元素都很大。 一个元素包含如下内容:
.attributes
.baseURI
.childNodes
.children
.className
等等...并且为每个元素复制了每个属性。 那是.baseURI
和.clientWidth
的 1000 个副本,对吗? 如果是这样。 那肯定是非常糟糕的。
如果只有一个元素,就会有一个.attributes、.children 等,所有克隆的元素都会使用它们。
好的,更多说明。
假设您有一个动态选择框,其选项可以根据事件驱动的 javascript/ajax 应用程序中可能发生的各种事件而改变,然后您必须在页面上的不同位置拥有同一个选择框的多个副本。 处理一个选择框,并让所有其他 html 副本自动更改,而无需使用 JavaScript 处理它们,效率会高得多。 我认为这显然必须是某种本地支持,但我什至不确定是否存在此类本地支持。
它可能是 HTML5 规范之一
你有办法改变一个独特的东西并同时应用于所有元素,这是一个:
CSS。
如果你有很多相同的类,例如: .testclass并且你想改变所有的background-color ,首先,创建一个名为test.css的文件,把它放到页面的同一个根文件夹中。
将此 css 放入您的test.css :
.testclass{ background-color: red;}
执行该 javascript 代码:
$('head').append( $('<link rel="stylesheet" type="text/css" />').attr('href', 'test.css') );
然后 javascript 将使页面加载一个新的 css,其中包含应用于所有具有.testclass类的元素的背景颜色代码。
这样您就不会进行迭代并同时应用于所有元素。
--编辑--
我明白你想要什么。 我已经找到了如何克隆 DOM,我克隆了一个,然后确实附加到了正文,看看这个:
$('your_select_identifier').change(function(e){ //when your select has changed...
$('the_other_select').remove();//here i removed the old one.
document.body.appendChild($('your_select_identifier')[0].cloneNode()); //here i cloned the DOM Node of your main select and did append on the document body as the new select.
});
我希望你可以用它做你想做的事情:)(我已经花了一段时间和那个 kkk 在一起。)
如果我理解正确,您可以使用.each()
。
迭代一个 jQuery 对象,为每个匹配的元素执行一个函数。
例子:
$('.class').each(function() {
$(this).css('color','blue');
});
演示。
更新:
你也可以这样做:
$("<style>")
.prop("type", "text/css")
.html("\
.class {\
color: blue;\
}")
.appendTo("head");
我认为您正在寻找的是适用于所有这 1000 个元素的 CSSStyleRule。 您只需更改一个 CSSStyleRule 的一个属性,而无需遍历所有这 1000 个元素并更改每个元素的样式属性。
例如,它可能看起来像这样:
const style = document.createElement("style");
document.head.appendChild(style);
const color = [255, 255, 255];
const incrementor = [-1, -1, -1];
style.textContent = `
.class {
color: rgb(${color.join(",")});
}
`;
const cssRule = style.sheet.cssRules[0]; // instanceof CSSStyleRule
requestAnimationFrame(function changeColor () {
cssRule.style.backgroundColor = `rgb(${color.join(",")})`;
const index = Math.floor(Math.random() * 3);
color[index] += incrementor[index];
if (color[index] === 0) incrementor[index] = 1;
else if (color[index] === 255) incrementor[index] = -1;
requestAnimationFrame(changeColor);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.