1. 计算机技术网首页
  2. JQuery使用教程

jQuery技术:widget CSS与站点CSS冲突

• JQuery使用教程 • 阅读 0

我为我的网站构建了一个小部件，我在加载时动态添加CSS，但问题与主机网站CSS文件冲突。 以下代码适用于我的小部件，它在加载时附加了CSS文件： 

function main() { jQuery(document).ready(function($) { /******* Load CSS *******/ var css_link = $("", { rel: "stylesheet", type: "text/css", href: "https://example.com/widget/green.css" }); css_link.appendTo('head'); var txt; txt='
'; txt=txt+''; txt=txt+'
'; txt=txt+'
get_All_Today_Matches();
'; txt=txt+'
'; txt=txt+'
'; txt=txt+'
'; txt=txt+'
'; txt=txt+'
'; txt=txt+'
'; txt=txt+'
'; $('#widget-container').html(txt); }); }

我想知道有没有办法隔离我的小部件的CSS？

顺便说一下，从匿名函数调用main函数（用于隔离目的）

PS：我使用css重置，但它仍然是同样的问题。

    您可以命名所有CSS。 这将避免您遇到常见CSS类名称（如container或wrapper ，例如： 

     .my-amazing-widget--tab-container { height: 100px; }

    如果您的所有CSS都是如上所述的命名空间，那么网站很可能不会在其CSS中包含您的小部件名称。

    我会避免像其他用户在他们的评论中所建议的那样使用!important这样的声明 – 如果你覆盖一个普通的类，你的样式最终可能会对网站的样式产生负面影响。

    我还会避免任何全局声明，例如将CSS重置导入到窗口小部件中。 CSS重置覆盖诸如body，div等元素，这会对主机网站的CSS产生负面影响。

    您需要更新所有相关的HTML才能使用命名空间。 CSS命名空间是解决此类问题的最佳方法，也是开发嵌入其他网站和应用程序的小部件时的最佳实践。

      以上就是jQuery教程分享widget CSS与站点CSS冲突相关内容,想了解更多jQuery开发(异常处理)及jQuery教程关注计算机技术网(www.ctvol.com)!)。

      本文来自网络收集，不代表计算机技术网立场，如涉及侵权请联系管理员删除。

      ctvol管理联系方式QQ:251552304

      本文章地址：https://www.ctvol.com/jquerytutorial/548087.html

      赞 (0)
      0
      上一篇 2021年1月13日
      下一篇 2021年1月13日

      精彩推荐