Usare Js al posto dei Css

**fermat** · 02-11-2010, 13:52

vorrei fare in modo che lo stile venga caricato solo tramite js e nn tramite css.
vedendo in giro ho visto che è possibile ed ho fatto una prova, che ovviamente nn funziona.
index.html

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>Scroll</title>
        
        <script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
        <script type="text/javascript" src="js/jquery.li-scroller.1.0.2.js"></script>
        <script type="text/javascript" src="js/script.js"></script>
        <script type="text/javascript">
            $(function(){
                $("ul#ticker01").liScroll();
            });
        </script>
    </head>
    <body onload="createCSS()">
        <ul id="ticker01">[*]<span>18/10/2010</span>news[*]<span>18/10/2010</span>news[*]<span>18/10/2010</span>news[*]<span>18/10/2010</span>news[*]<span>18/10/2010</span>news[*]<span>18/10/2010</span>news[/list]
    </body>
</html>

css:

codice:

.tickercontainer { /* the outer div with the black border */
                   border: 1px solid #000;
                   width: 640px;
                   height: 40px;
                   margin: 0;
                   padding: 0;
                   overflow: hidden;
}

.tickercontainer .mask { /* that serves as a mask. so you get a sort of padding both left and right */
                         position: relative;
                         left: 10px;
                         top: 14px;
                         width: 620px;
                         overflow: hidden;
}

ul.newsticker { /* that's your list */
                position: relative;
                left: 750px;
                font: bold 10px Verdana;
                list-style-type: none;
                margin: 0;
                padding: 0;
}

ul.newsticker li {
    float: left; /* important: display inline gives incorrect results when you check for elem's width */
    margin: 0;
    padding: 0;
}

ul.newsticker a {
    white-space: nowrap;
    padding: 0;
    font: bold 10px Verdana;
    margin: 0 50px 0 0;
}

ul.newsticker span {
    margin: 0 10px 0 0;
}

funzione js:

codice:

function createCSS() {
    var str = ".tickercontainer{border: 1px solid #000;width: 640px;height: 40px;margin: 0;padding: 0;overflow: hidden;background-color: black;}";
    var str2 = ".tickercontainer .mask{position: relative;left: 10px;top: 14px;width: 620px;overflow: hidden;}";
    var str3 = "ul.newsticker{position: relative;left: 750px;font: bold 10px Verdana;list-style-type: none;margin: 0;padding: 0;}";
    var str4 = "ul.newsticker li{float: left;padding: 0;}";
    var str5 = "ul.newsticker a{white-space: nowrap;padding: 0;font: bold 10px Verdana;margin: 0 50px 0 0;}";
    var str6 = "ul.newsticker span{margin: 0 10px 0 0;}";
    var pa = document.getElementsByTagName('head')[0] ;
    var el = document.createElement('style');
    el.type = 'text/css';
    el.media = 'screen';
    if(el.styleSheet) { // IE method
        el.styleSheet.cssText= str;
        el.styleSheet.cssText= str2;
        el.styleSheet.cssText= str3;
        el.styleSheet.cssText= str4;
        el.styleSheet.cssText= str5;
        el.styleSheet.cssText= str6;
    } else { // others
        el.appendChild(document.createTextNode(str,str2,str3,str4,str5,str6));
    }
    pa.appendChild(el);
}

è possibile fare caricare tutto lo stile in js senza css??

**fermat** · 02-11-2010, 19:07

ho ottenuto qualche progresso con questa modifica:

codice:

function createCSS() {
    var str = ".tickercontainer{border: 1px solid #000;width: 640px;height: 40px;margin: 0;padding: 0;overflow: hidden;background-color: black;}" +
        ".tickercontainer .mask{position: relative;left: 10px;top: 14px;width: 620px;overflow: hidden;}" +
        "ul.newsticker{position: relative;left: 750px;font: bold 10px Verdana;list-style-type: none;margin: 0;padding: 0;}" +
        "ul.newsticker li{float: left;padding: 0;color:white;}";
    var pa = document.getElementsByTagName('head')[0] ;
    var el = document.createElement('style');
    el.type = 'text/css';
    el.media = 'screen';
    if(el.styleSheet) { // IE method
        el.styleSheet.cssText= str;
    } else { // others
        el.appendChild(document.createTextNode(str));
    }
    pa.appendChild(el);
//    var bt= document.getElementsByTagName('div')[0];
//    bt.id = "tickercontainer";
}

ho messo tutto su str concatendando le varie opzioni.

**mxa** · 03-11-2010, 05:10

se tanto stai gia' usando jquery perche' non usi la funzione css()?

**fermat** · 03-11-2010, 09:59

Originariamente inviato da mxa
se tanto stai gia' usando jquery perche' non usi la funzione css()?

e mi posso costruire un intreo css tipo quello che sto provando a fare??

**fermat** · 03-11-2010, 12:40

me lo sono fatto così ma ottengo lo stesso risultato:

codice:

        <script type="text/javascript">
            $(document).ready(function(){
                $(".tickercontainer").css({'border':'1px solid #000','width':'640px','height':'40px','margin':'0','padding':'0','overflow':'hidden'});
                $(".tickercontainer .mask").css({'position':'relative','left':'10px','top':'14px','width':'620px','overflow':'hidden'});
                $("ul.newsticker").css({'position':'relative','left':'750px','font':'bold 10px Verdana','list-style-type':'none','margin':'0','padding':'0'});
                $("ul.newsticker li").css({'float':'left','margin':'0','padding':'0'});
            });
        </script>

nn so però può dipendere dal div (che è una lista di li che scrollano orizzontalmente con un jequey plugin) o dal mio tentativo.
potete dirmi se è giusto??
così almeno vedo di chi è la colpa

Discussione: Usare Js al posto dei Css

Strumenti discussione

Ricerca discussione

Visualizza

Usare Js al posto dei Css

Permessi di invio