Question

我正在创建一个Safari扩展程序，用于清除Outlook.com广告和其他内容。我已经制作了两个版本的扩展，一个用CSS和一个Javascript。但是，使用Javascript删除元素时会有延迟。我想知道是否可以使用Javascript调用CSS文件，以便更快地删除元素？

如果有人制作了Safari扩展程序或熟悉它，我该如何制作调用特定CSS文件的复选框？例如，有一个名为＆＃39; ads＆＃39;的CSS文件。我有一个关键字＆＃39; Key＆＃39;广告和我希望能够找到一种方式，以便在选中复选框后我可以调用它。

我希望你理解我想说的话:)写下我想说的话有点困难。

感谢。

这是调用函数的proxy.html文件。

<!doctype html>
<html lang="en">
<head>
 <script type="text/javascript">    
    var data = new Object();
    safari.application.addEventListener( "message", function( e ) {
      if( e.name === "getData" ) {
            data.advertisements = safari.extension.settings.getItem( "advertisements" );

        };

    }, false );

  </script>
</head>
<body>
</body>
</html>

这是script.js文件。

$(function() {
      safari.self.addEventListener( "message", function( e ) {
        if( e.name === "setData" ) {
         handleEvents( e.message );
        }
      }, false );

      safari.self.tab.dispatchMessage( "getData" );

    function handleEvents( e ){

        if (e.advertisements !='show') {
            var customStyles = document.createElement('style');     
            customStyles.appendChild(document.createTextNode('#RightRailContainer {display: none !important;} .WithRightRail {right: 0 !important;}'));
            document.documentElement.insertBefore(customStyles); 

        }

Answer 1

是的，你可以。在JavaScript中，您可以使用函数来创建DOM元素：

document.createElement("link"); // Create CSS element.

然后，您可以使用.setAttribute(attr, value)为创建的元素提供属性。你可以这样做：

var file=document.createElement("link");
file.setAttribute("rel", "stylesheet");
file.setAttribute("type", "text/css");
file.setAttribute("href", "main.css");

注意：您还可以直接设置属性file.[attr] = [value]。例如，这与上面的代码完全相同：

var file=document.createElement("link");
file.rel = "stylesheet";
file.type = "text/css";
file.href = "main.css";

在Javascript中调用CSS

1 个答案: