[CSS/JS] Class veranderen gaat supertraag - Softwareontwikkeling

vrijdag 4 oktober 2002 11:47

Acties:

Topicstarter

code:

<style>
  .row {
    background-color: lightsteelblue;
    cursor: default;
  }

  .rowHover {
    background-color: steelblue;
    cursor: pointer;
  }
</style>

<table border="0">
  <tr class="row" onMouseOver="this.className='rowHover'" onMouseOut="this.className='row'">
    <td>blabla</td>
  </tr>
  <tr class="row" onMouseOver="this.className='rowHover'" onMouseOut="this.className='row'">
    <td>bloebloe</td>
  </tr>
  <tr class="row" onMouseOver="this.className='rowHover'" onMouseOut="this.className='row'">
    <td>bleble</td>
  </tr>
</table>

Dit gaat opzich goed, maar bij een brede tabel en veel rows gaat het wisselen van de classes enorm traag. Weet iemand een betere/snellere manier om dit te doen?

vrijdag 4 oktober 2002 11:56

Acties:

RM-rf

1 2 3 4 5 7 6 8 9

de betere manier is om direct de style-object-properties aan te spreken:
this.style.backgroundColor = 'steelblue'; this.style.cursor='pointer'

die className heeft een grote vertraging in msie

Intelligente mensen zoeken in tijden van crisis naar oplossingen, Idioten zoeken dan schuldigen

vrijdag 4 oktober 2002 12:08

Acties:

Glival

Topicstarter

RM-rf schreef op 04 oktober 2002 @ 11:56:
de betere manier is om direct de style-object-properties aan te spreken:
this.style.backgroundColor = 'steelblue'; this.style.cursor='pointer'

die className heeft een grote vertraging in msie

Ik ben een site aan het maken waarvan de layout gemakkelijk door iemand anders aangepast moet kunnen worden; op de className-manier zou men alleen de stylesheet aan hoeven te passen, nu wordt het een stuk ingewikkelder; ook omdat ik de tabel dynamisch genereer. Ik kan er natuurlijk een js-functie van maken, maar ideaal is het niet...

iig bedankt voor je reactie; ik denk dat het wel op die manier moet.

vrijdag 4 oktober 2002 14:19

Acties:

Glival

Topicstarter

Kan ik trouwens ook met js bij de properties van de css-classes komen? Zoiets als:

code:

<style>
  class1 { color: crimson; }
  class2 { color: red; }
</style>

<table>
  <tr class="class1" onMouseOver="this.style.color=class2.color" onMouseOut="this.style.color=class1.color">
    <td>bla</td>
  </tr>
</table>

Maar dan werkend

vrijdag 4 oktober 2002 14:22

Acties:

Verwijderd

yup via document.styleSheets en cssRules

vrijdag 4 oktober 2002 15:17

Acties:

Glival

Topicstarter

Verwijderd schreef op 04 oktober 2002 @ 14:22:
yup via document.styleSheets en cssRules

Thnx

Na ff zoeken heb ik 'm nu (volgens mij) goed, en iig snel. Ik moest er wel wat js voor proggen, maar op deze manier gaat tenminste alles via de stylesheet.

code:

<style>
  .row {
    background-color: lightsteelblue;
  }

  .rowHover {
    background-color: steelblue;
    cursor: pointer;
  }
</style>

<script language="JavaScript">
    function GetStyleByName(ClassName) {
        var sheet = document.styleSheets[0];
        for (var i = 0; i < sheet.rules.length; i++) {
            if (sheet.rules[i].selectorText == ClassName) {
                return i;
            }
        }
        return null;
    }

    function ChangeClass(Element, ClassName) {
        var i = GetStyleByName(ClassName);
        if (i != null) {
            Element.style.cssText = document.styleSheets[0].rules[i].style.cssText;
        }
    }
</script>

<table border="0" width="100%" cellpadding="1" cellspacing="0">
  <tr class="row" onMouseOver="ChangeClass(this, '.rowHover')" onMouseOut="ChangeClass(this, '.row')">
    <td>blabla 1</td><td>blabla 2</td><td>blabla 3</td><td>blabla 4</td>
  </tr>
  <tr class="row" onMouseOver="ChangeClass(this, '.rowHover')" onMouseOut="ChangeClass(this, '.row')">
    <td>blabla 1</td><td>blabla 2</td><td>blabla 3</td><td>blabla 4</td>
  </tr>
  <tr class="row" onMouseOver="ChangeClass(this, '.rowHover')" onMouseOut="ChangeClass(this, '.row')">
    <td>blabla 1</td><td>blabla 2</td><td>blabla 3</td><td>blabla 4</td>
  </tr>
</table>

Als iemand kritiek heeft (behalve op het 3x verneuken van de layout

), hoor ik het graag...

vrijdag 4 oktober 2002 15:40

Acties:

thomaske

» » » » » »

hier op nt4, ie5.0 werkt het, dan kan het bijna niet meer misgaan

Brusselmans: "Continuïteit bestaat niet, tenzij in zinloze vorm. Iets wat continu is, is obsessief, dus ziekelijk, dus oninteressant, dus zinloos."

vrijdag 4 oktober 2002 15:51

Acties:

Bergen

Spellingscontroleur

Maar gebruik niet niet gewoon de hover-functie van CSS?

Da's toch veel handiger??

HTML:

<html>

    <head>
        <style type="text/css" link="stylesheet">
            tr.row
                {
                background-color: lightsteelblue;
                cursor: default;
                }
            
            tr.row:hover
                {
                background-color: steelblue;
                cursor: pointer;
                }
        </style>
    </head>

    <body>
        <table border="0">
            <tr class="row">
                <td>blabla</td>
            </tr>
            <tr class="row">
                <td>bloebloe</td>
            </tr>
            <tr class="row">
                <td>bleble</td>
            </tr>
        </table>
    </body>

</html>

vrijdag 4 oktober 2002 15:58

Acties:

Glival

Topicstarter

GerbenW schreef op 04 oktober 2002 @ 15:51:
Maar gebruik niet niet gewoon de hover-functie van CSS?

Da's toch veel handiger??

HTML:

<html>

    <head>
        <style type="text/css" link="stylesheet">
            tr.row
                {
                background-color: lightsteelblue;
                cursor: default;
                }
            
            tr.row:hover
                {
                background-color: steelblue;
                cursor: pointer;
                }
        </style>
    </head>

    <body>
        <table border="0">
            <tr class="row">
                <td>blabla</td>
            </tr>
            <tr class="row">
                <td>bloebloe</td>
            </tr>
            <tr class="row">
                <td>bleble</td>
            </tr>
        </table>
    </body>

</html>

Zou natuurlijk veel mooier zijn, maar dat werkt (bij mij) niet...

vrijdag 4 oktober 2002 15:59

Acties:

Verwijderd

werkt alleen in Mozilla en Konqueror

vrijdag 4 oktober 2002 16:00

Acties:

crisp

Devver

Pixelated

GerbenW schreef op 04 oktober 2002 @ 15:51:
Maar gebruik niet niet gewoon de hover-functie van CSS? Da's toch veel handiger??
[...]

Ja, da's leuk voor in Mozilla; IE ondersteund dit nog niet...

nb om je stylesheet rules op te vragen moet je in NS/Mozilla document.styleSheets[0].cssRules[x] gebruiken in plaats van document.styleSheets[0].rules[x]

Intentionally left blank

vrijdag 4 oktober 2002 16:01

Acties:

Bergen

Spellingscontroleur

Verwijderd schreef op 04 oktober 2002 @ 15:59:
werkt alleen in Mozilla en Konqueror

Hee ja nou je 't zegt... Ik browse altijd alles af met Mozilla

vrijdag 4 oktober 2002 16:21

Acties:

Verwijderd

als uitbreiding op Crisp

JavaScript:

function darkblue(nr)
{
 switch(nr)
  {
case 1: stijl= document.styleSheets[0].cssRules ? 
               document.styleSheets[0].cssRules[0].style : // Moz
               document.styleSheets['testcss'].rules[0].style ;break; //IE              
case 2: stijl= document.styleSheets[0].cssRules ? 
               document.styleSheets[0].cssRules[1].style : 
               document.styleSheets['testcss'].rules[1].style ;break;   
case 3: stijl= document.styleSheets[0].cssRules ? 
               document.styleSheets[0].cssRules[2].style : 
               document.styleSheets['testcss'].rules[2].style ;break;                   
 }
 stijl.backgroundColor='steelblue';
}

vrijdag 4 oktober 2002 16:37

Acties:

Glival

Topicstarter

Deze werkt in IE en Mozilla:

JavaScript:

function GetStyleByName(ClassName) {
    var sheet = document.styleSheets[0];
    if (sheet.rules)
    {
        // IE
        for (var i = 0; i < sheet.rules.length; i++) {
            if (sheet.rules[i].selectorText == ClassName) {
                return sheet.rules[i].style.cssText;
            }
        }
    } else {
        // Mozilla
        for (var i = 0; i < sheet.cssRules.length; i++) {
            if (sheet.cssRules[i].selectorText == ClassName) {
                return sheet.cssRules[i].style.cssText;
            }
        }
    }
    return null;
}

function ChangeClass(Element, ClassName) {
    var s = GetStyleByName(ClassName);
    if (s != null) {
        Element.style.cssText = s;
    }
}