javascript-获取标签css仅可用于兄弟姐妹和孩子？

概述最近,我开始偏爱单个.js文件形式的可恢复UI模块,该文件使用div.innerText等 *** 作dom.我正在开发一种类型为(a new and better one I swear)的UI框架,我计划允许其他开发人员编写自己的模块来扩展我的框架.为了确保两个开发人员的工作不会互相干扰,我正在使我的模块独立.然后,由于它们是独立的,我可以快速甚至递归地将它们部

最近,我开始偏爱单个.Js文件形式的可恢复UI模块,该文件使用div.innerText等 *** 作dom.我正在开发一种类型为(a new and better one I swear)的UI框架,我计划允许@R_502_6229@人员编写自己的模块来扩展我的框架.

为了确保两个开发人员的工作不会互相干扰,我正在使我的模块独立.然后,由于它们是独立的,我可以快速甚至递归地将它们部署到页面上的任何div中；例如调用uIElement.deploy(element)通过如下代码将以元素为父元素的可重用uIElement设置为：

uIElement.deploy=function(root){ uIElement.div=document.createElement("div"); uIElement.div.INNERHTML=`  <style>   button{    background:red;   }  </style>  <button>hey!</button>`; root.appendChild(uIElement.div);}

一切都很好,但是在样式方面,我对于声明< style> INNERHTML中的元素,因为它们可能会对其他可重用模块的样式产生不利影响.

因此,我想知道,为什么HTML标准没有决定是否要放置< style>除了< head>容器中的元素,它仅对容器的子代(即样式标签的兄弟姐妹)及其后代起作用？提升代码可重用性是一个好主意.

顺便说一句,如何避免上面提到的问题？我目前的想法是给div一个唯一的ID,然后在我的< style>标记,方法是使用regex解析INNERHTML.最佳答案CSS代表级联样式表.级联建议将其倾倒在从根节点：document开始的每个元素上.规范指出,任何style元素始终适用于整个文档.

对于您将自己的样式应用于元素的问题,我的解决方案.但是,此解决方案并不理想,并且可以更好地解决,因为每当添加元素时,都会使样式元素干扰文档.

uIElement.deploy=function(element,classname){ uIElement.div=document.createElement("div"); uIElement.div.INNERHTML=`  <style>   button.${classname}{    background:red;   }  </style>  <button >hey!</button>`; element.appendChild(uIElement.div);}

最好是添加一个链接元素,该链接元素指向具有有关代码样式信息的CSS文件.

uIElement.deploy=function(element,classname){ uIElement.div=document.createElement("div"); //link element - if not present in document: add. if (!document.querySelector(`link[href='location/${element}.CSS']`)) {     const link = document.createElement("link");     link.href = `location/${element}.CSS'`;     document.head.appendChild(link); } uIElement.div.INNERHTML=`  <button >hey!</button>`; element.appendChild(uIElement.div);}

样式表文件(.CSS)还提供了更轻松,更灵活的代码管理,如果您只想更改外观,则无需更改Js文件.

即使在上述情况下,我也强烈建议为您创建的元素设置唯一的ID或类名,以使您的CSS规则有所不同,因为CSS规则对整个文档均有效.

总结

以上是内存溢出为你收集整理的javascript-获取标签css仅可用于兄弟姐妹和孩子？ 全部内容，希望文章能够帮你解决javascript-获取标签css仅可用于兄弟姐妹和孩子？ 所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。