Calling a CSS within Javascript

Question

I am creating a Safari extension that clears Outlook.com advertisements and other content. I have made two versions of the extension, one with CSS and one Javascript. However, there is a delay when removing the elements with Javascript. I was wondering is it possible to call a CSS file using Javascript so that it removes the elements quicker?

If anyone has made a Safari extension or is familiar with it, how can I make check box that will call a specific CSS file? For example, there is a CSS file called 'ads' and I have checkbox with the 'Key' ads and I want to be able to find a way so that I can call it when the checkbox has been checked.

I hope you understand what I am trying to say :) It is a bit difficult to write what I want to say.

Thanks.

This is the proxy.html file that calls the functions.

<!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>

Here is the script.js file.

$(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); 

        }

Spencer Wieczorek · Accepted Answer · 2014-11-16 18:18:21Z

1

Yes you can. In JavaScript you can use a function to create DOM elements:

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

Then you can use .setAttribute(attr, value) to give attributes to the created element. You can do something like this:

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

Note: You can also set the property directly doing file.[attr] = [value]. For example, this does the same thing as the above code:

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

edited Nov 16, 2014 at 18:18

answered Nov 16, 2014 at 16:50

Spencer Wieczorek

21.7k7 gold badges46 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Ryan Hawdon Over a year ago

There is no error message. Also, the CSS is called 'main' not 'ads', sorry. Current.

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);

New.

if (e.advertisements !='show') { var file=document.createElement("link"); file.setAttribute("rel", "stylesheet"); file.setAttribute("type", "text/css"); file.setAttribute("href", "main.css");

Ryan Hawdon Over a year ago

I'm not sure what you are saying.

Spencer Wieczorek Over a year ago

@RyanHawdon You said "It apply the changes of the CSS file", did it not? I mean, are you not trying to use a CSS files to apply changes in the style of the page?

Ryan Hawdon Over a year ago

I would like to use the CSS files to apply changes in page.

Oriol Over a year ago

There is no need of using setAttributte, properties can be used too: file.rel = "stylesheet"; file.type = "text/css"; file.href = "main.css";

|

Collectives™ on Stack Overflow

Calling a CSS within Javascript

1 Answer 1

7 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Related