bewerk css classe

Door Jan R op 31-08-2022 11:56

1.975 views

Kan ik een css classe wijzigen? Ik bedoel echt de classe en niet element.classname of toggleclass

vb volgende classe


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

Ivo P

31-08-2022 12:23

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

31-08-2022 13:20

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:


<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.


$(".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

31-08-2022 14:59

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

31-08-2022 15:02

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:


<span class="js-width-dynamic">Hallo allemaal!</span>

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

Ozzie PHP

31-08-2022 16:44

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

31-08-2022 19:51

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



    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

31-08-2022 20:18

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:


<?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

31-08-2022 20:41

@Jan Koehoorn

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

Jan R

01-09-2022 18:58

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

01-09-2022 19:47 gewijzigd op 01-09-2022 19:48

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:


    grid-template-columns: repeat(4, 1fr);

Tussen de grid items hebben we een gutter/gap van 10px:


    grid-gap: 10px;

Alle kolommen even breed, zonder JavaScript ;-)

Reageren

Inloggen om te reageren