All geek questions in one place

Enable disable stylesheet using javascript in chrome

Rephrase the question. What is the best way to provide alternative style sheets for a document?

I have a list of style sheets, all of which are listed in the html file. I use javascript to disable just one file.

Example:

style1   disabled = false
style2   disabled = true

In practice, the last loaded stylesheet (style2) is active, regardless of the disabled property.

How can I alternate stylesheets in a document in chrome?

I tried to set the attribute value href, but it seems to be read-only.

example code that I used: (I use an object called MenuStyles that stores various css information)

function setActiveStyleSheet(name) {

    var selectedSheet;
    var currentSheet;
    for (var i = 0; i < MenuStyles.styleSheets.length; i++) {
        currentSheet = MenuStyles.styleSheets[i];
        if (currentSheet.name === name) {
            selectedSheet = currentSheet.sheetObj;
            currentSheet.disabled = false;
        } else {
            currentSheet.disabled = true;
        }
    }
    return selectedSheet;
}

EDIT: , . . :

function setActiveStyleSheet(name) {
    var selectedSheet;
    var currentSheet;
    for (var i = 0; i < MenuStyles.styleSheets.length; i++) {
        currentSheet = MenuStyles.styleSheets[i];
        if (currentSheet.name === name) {
            selectedSheet = currentSheet.sheetObj;
            currentSheet.sheetObj.disabled = false;
        } else {
            currentSheet.sheetObj.disabled = true;
        }
    }
    return selectedSheet;
}
+2
5

'title' . title PREFERRED, PERSISTENT. . http://www.alistapart.com/articles/alternate/

0

BODY , . BODY, . .

<body class="sheet1">


sheet1.h1 {
 ...
}
sheet2.h1 {
 ...
}
+2

, -

document.styleSheets[i].disabled=true or
document.styleSheets[i].disabled=false;

2 ,

var S=document.styleSheets;
if(S[0].disabled){
  S[0].disabled=false;
  S[1].disabled=true;
}
else{
  S[1].disabled=false;
  S[0].disabled=true;
}
+2

/ "" DOM (Gecko), / (Webkit IE). , "link", ( "style" ), IE10+. , , IE .

CSS "style" , IE, /, ( ..).

+2

(), :

Suppose you know exactly the order of your style sheet. Let's say you want to alternate a stylesheet 0 and 1 (first and second):

To get the style sheet state (on / off), you can try this (e.g. testing the second):

document.styleSheets[1].disabled

... and returns trueor false.

So, to alternate, you can write this code in the event onclick:

document.styleSheets[0].disabled = !( document.styleSheets[1].disabled = !(document.styleSheets[1].disabled) );

NTN!

0
source

Source: https://habr.com/ru/post/1584562/

More articles:


All Articles