Wprowadzanie kodu JavaScript do CSS

Question

Myślałem o czymś. Na moim forum znajdują się domyślne kody CSS, które użytkownicy mogą wybierać. Zmienia to wszystko z tła na kolor tekstu. Mam kod javascript. Czy możliwe jest uczynienie tego tak, aby javascript był częścią CSS, więc jeśli pewien kod CSS jest domyślny, to częścią tego jest javascript?

Answer 1

You can, ale tak naprawdę nie powinieneś. Zamiast tego użyj osobnych plików skryptów, które odpowiadają używanym plikom CSS. Może zadaj inne pytanie, w którym przedstawisz konkretny scenariusz, w którym próbujesz rozwiązać konkretny problem, i prawdopodobnie możemy powiedzieć Ci, co zwykle robi się, aby go rozwiązać.

Answer 2

Jest obejść ...

Nie umieszczenie skryptu w czystym kodzie CSS, ale mieć skrypt do generowania CSS zależności co skryptowy język używasz (np PHP) Twój link do pliku CSS powinien wyglądać następująco:

<link href="/styles.php" media="screen" rel="stylesheet" type="text/css" /> 

można nawet dodać params jak:

<link href="/styles.php?type=main" media="screen" rel="stylesheet" type="text/css" /> 

a ty styles.php co powinien wyglądać plik CSS z kilka wyjątków:

body { 
    <?php if ($_GET['type'] == 'main') echo color: BLACK; else color: RED; ?> 
    ......... 
} 

Answer 3

chciałem osiągnąć to samo (ma zmienne i pewnej logiki przetwarzania w CSS), który podpuszczony mi rozwinąć kilka narzędzi jednostkowych (jeden kątowe i jeden V-JS):

• CjsSS.js to narzędzie Vanilla Javascript (więc nie ma zewnętrznych zależności), które obsługuje powrót do IE6.

• ngCss jest moduł kątowy + filtr + Factory (aka: plugin), który obsługuje kątowa 1.2+ (więc z powrotem do IE8)

Oba zestawy narzędzi pozwoli Ci zrobić to w stylu tag lub w zewnętrznym pliku * .css:

/* 
<script src='external_logic.js'></script> 
<script> 
    var mainColor = "#cccccc"; 
</script>*/ 

BODY { 
    color: /*{{mainColor}}*/; 
} 

a to z twoich na stronie style atrybuty:

<div style="color: {{mainColor}}" cjsss="#sourceCSS">blah</div> 

(lub ngCss)

<div style="color: {{mainColor}}" ng-css="sourceCSS">blah</div> 

UWAGA: W ngCss, można również zrobić $scope.mainColor zamiast var mainColor

Domyślnie JavaScript jest wykonywany w piaskownicy IFRAME, ale tak naprawdę to nie jest inaczej od sposobu, w jaki przeglądarka przetwarza twoje pliki * .js. Po prostu pamiętaj, aby stworzyć swój własny CSS i hostować go na swoim własnym serwerze, wtedy XSS nie jest problemem. Ale piaskownica zapewnia o wiele więcej bezpieczeństwa i spokoju ducha.

CjsSS.js i ngCss spaść gdzieś w między innymi narzędziami wokół osiągnąć podobne zadania:

• LESS, SASS i Stylus są tylko wszystkie Preprocesory i wymagają, aby nauczyć się nowego języka i magiel CSS. Zasadniczo rozszerzyli CSS o nowe funkcje językowe. Wszystkie są również ograniczone do wtyczek opracowanych dla każdej platformy, podczas gdy CjsSS.js i ngCss pozwalają na dołączenie dowolnej biblioteki JavaScript poprzez <script src='blah.js'></script>.

• AbsurdJS zobaczył te same problemy z preprocesorami i poszedł w przeciwnym kierunku; zamiast rozszerzania CSS, AbsurdJS stworzył bibliotekę JavaScript do generowania CSS bez bezpośredniego dotykania CSS.

CjsSS.js i ngCss zajęły pierwsze miejsce; znasz już CSS, znasz już Javascript, więc pozwól im pracować razem w prosty, intuicyjny sposób. CjsSS.js można uruchomić po stronie serwera (poprzez Node.js) w celu wstępnego przetworzenia CSS lub oba mogą być uruchamiane po stronie klienta. Można również uruchomić w sposób hybrydowy, w którym większość zmiennych jest wstępnie przetwarzana, a pozostałe są wykonywane po stronie klienta.