Add classes to a Script line in html

Question

Can I hide a script line using CSS? for example if we added a class="slider" to the script line like below:

<script class="slider" type="text/javascript" src="assets/js/slider.js"></script>

and then in css we did:

.slider {display: none}

The reason I want that is I want to enable the js when a specific style sheet is called

CSS is for **DISPLAY** control. A script tag is always hidden anyways. "hiding" it via CSS does NOT prevent the code from running. CSS can NOT be used to turn code on or off. — Marc B, Dec 05 '13 at 19:42
Why don't you select the stylesheet from within your script?? — Severin, Dec 05 '13 at 19:43
Thanks that answered my question. Any Idea tho how do I run a js when a specific style-sheet is being used? — , Dec 05 '13 at 19:43
There is no "class" parameter for scripts. You cannot disable a script using CSS, you will have to use Javascript. — APAD1, Dec 05 '13 at 19:44
@APAD1: [Yes there is](http://www.w3.org/TR/html-markup/script.html) — Adrift, Dec 05 '13 at 19:50
I don't see anywhere on that page that says "class" is an attribute for script, @Adrift. — APAD1, Dec 05 '13 at 19:52
Under **permissible attributes** it includes [Global Attributes](http://www.w3.org/TR/html-markup/global-attributes.html) which includes `class` - the same holds true for HTML 4.01 — Adrift, Dec 05 '13 at 19:54

score 2 · Answer 1 · edited May 23 '17 at 11:57

2

Have a look at this related question to find a way to include your CSS via JavaScript: Dynamically loading css file using javascript with callback without jQuery

edited May 23 '17 at 11:57

Community

1
1

answered Dec 05 '13 at 19:46

Severin

8,508
14
68
117

score 0 · Answer 2 · answered Dec 05 '13 at 19:52

At least for the moment, assume you are only loading style sheets during document load. Then, you can do the following:

function checkLoadedSheetsForHref(href) {
    for (var i = 0; i < document.styleSheets.length; ++i) {
        if (document.styleSheets[i].href == href) {
        // or if you just want to check the filename, check if href contains it:
        // if (document.styleSheets[i].href.indexOf(href) != -1) { 
            return true;
        }
    }
    return false;
}

document.onload = function() {
    if (checkLoadedSheetsForHref("assets/js/slider.js")) {
        // enable whatever js you want
    }
}

If you have something that dynamically loads style sheets, you could set timers to wait for the sheet to load, or add an onload to whatever is adding it, or just check the string you're loading.

Kevin Lynch · Answer 3 · 2013-12-05T20:16:26.970

0

I would do it like so. Self explanatory:

var SliderVar = document.getElementById("slider");
if (SliderVar.style.display == "none") {
    var showScript = false;  
} else {
    var showScript = true;   
}
if(showScript) {
  var sc = document.createElement('script');
  sc.src = 'assets/js/slider.js';
  sc.type = 'text/javascript';
  if(typeof sc['async'] !== 'undefined') {
     sc.async = true;
  }  
  document.getElementsByTagName('head')[0].appendChild(sc);
}

edited Dec 05 '13 at 20:16

answered Dec 05 '13 at 19:55

Kevin Lynch

24,427
3
36
37

I don't understand this to be honest, what does it do? – Dec 05 '13 at 19:56
It sets a `var` named `showScript` with a default value of false. It is then set to `true` within the `if` statement if the condition is met. The condition being if the slider is set to display none then the script will not be included. – Kevin Lynch Dec 05 '13 at 20:16

Add classes to a Script line in html

3 Answers3