Question

我正在将Twitter Bootstrap注入我正在制作的书签中，但CSS正在覆盖页面上的现有样式表。我只想将它应用于bookmarklet生成的标记。这是可能吗？如果是这样，我该怎么做呢？

Answer 1

让bookmarklet创建自己的<object>，然后将Bootstrap和标记作为data注入其data URI属性：

＆＃13;

void
( 
  function disable_and_replace_bootstrap() 
    { 
    "use strict"; 
      
    var css_markup = '<link rel="stylesheet" type="text/css" href="https://getbootstrap.com/dist/css/bootstrap.min.css"/>'; 
    var bootstrap_markup = "<h1 class='h6'>Hi</h1><h6 class='h1'>Bye</h6>";
    var newobj = document.createElement("object");
          
    newobj.setAttribute("width", "100px");
    newobj.setAttribute("height", "100px");
    document.body.innerHTML = bootstrap_markup;
          
    newobj.setAttribute("data", "data:text/html,"+css_markup+bootstrap_markup);
    document.body.appendChild(newobj);
      
    }() 
)

＆＃13;

<强>参考

Answer 2

您必须将css更改为仅适用于您的书签。因为bootstrap css是从较少的文件编译的，所以你可以很容易地修改它并编译。

在bookmarklets中使用twitter bootstrap - 影响页面其余部分的CSS

2 个答案: