bewerk css classe

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Jan R

Jan R

31/08/2022 11:56:21
Quote Anchor link
Kan ik een css classe wijzigen? Ik bedoel echt de classe en niet element.classname of toggleclass

vb volgende classe
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
span.width200 {
    width: 200px;
    display: inline-block;
}


Hier wil ik de ideale breedte berekenen en dan width wijzigen in die ideale breedte.

Ik kan natuurlijk ook alle spans met queryselectorall opzoeken en hiervan de breedte instellen maar het lijkt me beter om de classe te wijzigen.

Jan
 
PHP hulp

PHP hulp

30/05/2024 05:49:25
 
Ivo P

Ivo P

31/08/2022 12:23:59
Quote Anchor link
heb je hier wat aan: https://stackoverflow.com/questions/566203/changing-css-values-with-javascript

(en lees dan het commentaar erbij, want niet elk antwoord is even goed)
 
Ozzie PHP

Ozzie PHP

31/08/2022 13:20:24
Quote Anchor link
Ik weet niet of ik je helemaal goed begrijp.

Dus overal waar op de webpagina die class width200 wordt gebruikt wil jij een andere width hebben dan die 200px. Begrijp ik het zo goed?

Dus als op de pagina staat:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<span class="width200">Hallo allemaal!</span>

Dan zou dat normaal 200px breed zijn. En jij wil die breedte nadat de pagina is geladen wijzigen naar iets anders. Correct?

In dat geval kun je dat makkelijk doen via jQuery.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
$(".width200").css("width", "500px");

Je kunt dan eerst de ideale breedte berekenen. Die stop je in een variabele. En waar nu in het voorbeeld 500px staat, plaats je dan die variabele.
 
Ivo P

Ivo P

31/08/2022 14:59:31
Quote Anchor link
In dat geval, Ozzie, pas je de momenteel aanwezige elementen aan.
Dat kunnen er bijvoorbeeld 1000 zijn, wat dus enige moeite voor je browser kost.

Daarnaast kun je door ajax calls of simpelweg javascript acties je pagina uitbreiden met elementen die ook de class width200 hebben. Deze worden dan niet automagisch aangepast naar de width 500px.

Vandaar denk ik de vraag om dat in de css-definitie aan te passen.
Ik zou dan niet width200 kiezen als naam voor de class, aangezien dit iets met 200px suggereert.
Dan zou je beter widthschermvullend of iets dergelijks kunnen nemen.
Dan verander je centraal die waarde van 200px naar 500px.

(denk trouwens ook eens aan width:100%. Al gaat dat niet op voor lettergrootte of kleuren die je mogelijk achteraf wilt bewerken)
 
Jan Koehoorn

Jan Koehoorn

31/08/2022 15:02:36
Quote Anchor link
Ik heb redelijk wat ervaring met CSS (ongeveer vanaf het begin) en deze truc nog nooit nodig gehad, maar goed ;-)

Als je een breedte dynamisch aanpast, zou ik als classname nooit "width200" gebruiken. Want iets later is hij misschien 500px breed en dat is verwarrend. Gebruik dan iets als:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<span class="js-width-dynamic">Hallo allemaal!</span>

Dan is het in je code meteen duidelijk wat er gebeurt.
 
Ozzie PHP

Ozzie PHP

31/08/2022 16:44:55
Quote Anchor link
Ivo P op 31/08/2022 14:59:31:
In dat geval, Ozzie, pas je de momenteel aanwezige elementen aan.

Volgens mij is dat ook wat hij wil. En vandaar ook mijn vraag of ik hem goed heb begrepen.

Jan Koehoorn op 31/08/2022 15:02:36:
Als je een breedte dynamisch aanpast, zou ik als classname nooit "width200" gebruiken. Want iets later is hij misschien 500px breed en dat is verwarrend.

Dat is uiteraard waar, maar het kan zijn dat er bijvoorbeeld van een bepaald theme of een bepaalde extensie gebruikt wordt gemaakt die die classnaam hanteert, waardoor je daar aan gebonden bent.
 
Jan R

Jan R

31/08/2022 19:51:04
Quote Anchor link
Hi

De naam width200 was gewoon 1: als voorbeeld en 2: als fallback indien javascript zou falen of uitgeschakeld is.

De optie van jquery lukt wel maar ik hou veel meer van Vanilla JavaScript. Eventueel met een aardbeiensausje :) Ik vind jq zo moeilijk om te debuggen. maar dat is mijn probleem.

De oplossing van ivo p komt het dichts bij wat ik zocht. Echter als ik alle csssheets moet doorlopen om de juiste te vinden, dan alle rules doorlopen om weer de juiste te vinden opnieuw de style doorzoeken.

Dan denk ik dat de oude oplossing sneller en beter blijft.

Toch allen bedankt om te helpen.

ter info oude code
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
    let players = document.querySelectorAll("span.spelerwit, span.spelerzwart");
    let max=0;
    for (i=0;i<players.length;i++) {
        if (max<players[i].scrollWidth) {
            max = players[i].scrollWidth;
        }
    }
    for (i=0;i<players.length;i++) {
        players[i].style.width = max + "px";
    }
 
Jan Koehoorn

Jan Koehoorn

31/08/2022 20:18:03
Quote Anchor link
Wat je nu doet (met JavaScript de breedste opzoeken en die vervolgens op alle spans toepassen) is ongelofelijk makkelijk met CSS Flexbox/Grid te bereiken. Het loont echt de moeite om dat te leren. Een voorbeeldje:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<?php
$spelers
= [
    'Jan',
    'Piet',
    'Klaas',
    'Speler met een heel lange naam',
];

?>


<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style>
        body {
            margin: 0;
        }
        .wrapper {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            margin: 0 auto;
            width: 80%;
            border: 1px solid;
            background-color: lightblue;
            border-radius: 10px;
            min-height: 200px;
        }
        .speler {
            display: inline-block;
            padding: 5px;
            border: 1px solid black;
            border-radius: 5px;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <?php foreach ($spelers as $speler): ?>
            <span class="speler"><?=$speler;?></span>
        <?php endforeach;?>
    </div>
</body>

</html>
 
Ozzie PHP

Ozzie PHP

31/08/2022 20:41:22
Quote Anchor link
@Jan Koehoorn

Wellicht leuk als je even een uitleg erbij kunt geven en een voorbeeldje online plaatst via bijv. https://jsfiddle.net/ .
 
Jan R

Jan R

01/09/2022 18:58:44
Quote Anchor link
Ik heb het nooit werkende gekregen via flex
Structuur is 1 speeldag (370px) met onderliggend
* titel
* datum
* De partijen
Wit speler (130px)
uitslag (40px)
Zwart speler (130px)
Officiele ronde (40px)
* Vrije spelers
Deze groep zoveel mogelijk op 1 rij dan naar volgende rij.
De hoogte en breedte van elke groep moet ook hetzelfde zijn.
praktijk: https://www.janr.be/schaak/sc_post-gent/?page=volgenderonden&all=1

Ik weet het ik wil veel maar momenteel ben ik blij met mijn resultaat maar probeer het toch te verbeteren. Als ik de breedte exact kan bepalen kunnen er soms meer op en spaar ik ook papier bij afdruk (verplicht!).

Jan
 
Jan Koehoorn

Jan Koehoorn

01/09/2022 19:47:57
Quote Anchor link
Ozzie PHP op 31/08/2022 20:41:22:
@Jan Koehoorn

Wellicht leuk als je even een uitleg erbij kunt geven en een voorbeeldje online plaatst via bijv. https://jsfiddle.net/ .


https://jsfiddle.net/jankoehoorn/fm1r570o/33/

Uitleg: de container div krijgt display: grid in de css.

Het grid krijgt 4 even grote kolommen:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
    grid-template-columns: repeat(4, 1fr);


Tussen de grid items hebben we een gutter/gap van 10px:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
    grid-gap: 10px;


Alle kolommen even breed, zonder JavaScript ;-)
Gewijzigd op 01/09/2022 19:48:19 door Jan Koehoorn
 
Ozzie PHP

Ozzie PHP

02/09/2022 00:10:26
Quote Anchor link
Jan Koehoorn op 01/09/2022 19:47:57:
Alle kolommen even breed, zonder JavaScript ;-)

https://jsfiddle.net/ntvh6eqk/ :-)
 
Jan Koehoorn

Jan Koehoorn

02/09/2022 09:09:31
 
Ozzie PHP

Ozzie PHP

02/09/2022 12:15:58
Quote Anchor link
Ja, niet stiekem een "word-wrap: break-word;" toevoegen hè

;-) :-)

Toevoeging op 02/09/2022 12:18:39:

Maar het zijn nu toch gewoon 4 blokken met dezelfde breedte ongeacht de langste naam? Zelfs als de namen klein zijn? Of mis ik iets?

https://jsfiddle.net/xwt9qfd3/
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.