hoe hele styling opslaan in variable
Het lukt mij niet op de hele styling van een element aan een variable toe te wijzgen. Op dit moment heb ik onderstaande code, waar ik dus de tekst wel opsla. van titel 1 zou ik dus de volledige styling "text-align: center; color:yellow". eruit moeten kunnen halen.Ben al even bezig, maar nog steeds geen werkende oplossing gevonden. Heef iemand een idee hoe ik dit voor elkaar moet krijgen? Bij voorbaat dank.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<h1 id="titel1" style="text-align: center; color:yellow" contenteditable="plaintext-only">titel1</h1>
<button type="submit" name="actie" id="actie">Click to Save me</button>
<script type="text/javascript">
$(document).ready(function(argument) {
$('#actie').click(function()
{
$titel1 = $('#titel1').html();
alert($titel1);
});
}
);
</script>
<h1 id="titel1" style="text-align: center; color:yellow" contenteditable="plaintext-only">titel1</h1>
<button type="submit" name="actie" id="actie">Click to Save me</button>
<script type="text/javascript">
$(document).ready(function(argument) {
$('#actie').click(function()
{
$titel1 = $('#titel1').html();
alert($titel1);
});
}
);
</script>
het is onderdeel van een page-builder, waarbij je dus fontkleur etc.. per element of deel van het element kan aanpassen.
Gewijzigd op 01/10/2023 13:34:42 door Paul Weiss
Ik gebruik off-the-shelf componenten zoals Smarty (templateparser). En een reeks vaste variabelen die ik gedefinieerd heb. Voordeel van Smarty is dat die ook uitvoer voor in templates compileert. En zelfs kan cachen.
Gewijzigd op 01/10/2023 13:36:41 door - Ariën -
externe systemen wil ik niet integreren. als er namelijk iets niet goed gaat weet ik waar het zit, aangezien ik het zelf heb gebouwd. Uiteindelijk is het hele systeem vrij eenvoudig opgezet. Maar we dwalen af van het topic. Hoor natuurlijk graag of er een javascript oplossing voor is.
De meeste grote sites zijn wel afhankelijk van tientallen externe packages, dat ik jouw argumenten geen reden vind. ;-)
- Ariën - op 01/10/2023 13:44:08:
Als er iets niet goed gaat in een extern product, moet dat bij de ontwikkeling al vaak ontdekt worden door middel van unit tests. Eigenlijk zou je daar wel op mogen vertrouwen.
De meeste grote sites zijn wel afhankelijk van tientallen externe packages, dat ik jouw argumenten geen reden vind. ;-)
De meeste grote sites zijn wel afhankelijk van tientallen externe packages, dat ik jouw argumenten geen reden vind. ;-)
Ik begrijp je punt. Maar wil gewoon een systeem wat helemaal zelf is gemaakt. Vind ik prettiger voor mijzelf ook. maar wel bedankt voor het meedenken natuurlijk.
Niks mis mee, hoewel je er bijna niet aan ontkomt om ook externe libraries te gebruiken. Sterker nog, je gebruikt jQuery en dat ik ook een externe library. Als je echt alles zelf wil doen, dan zou je ook geen jQuery moeten gebruiken. Misschien is het eens zinvol (voor jezelf) om te overdenken waarom je per se alles zelf wil doen. Sommige bestaande dingen kun je prima implementeren in je eigen systeem. Dan is het nog steeds je eigen systeem, maar met wat externe extra's erbij.
Inline styling gebruik je eigenlijk alleen voor afwijkende zaken die je niet wil opnemen in je algemene stylesheet. Bijvoorbeeld een bepaald element dat op een specifieke pagina net iets meer margin moet hebben, of een afwijkend kleurtje. Voor al het overige gebruik je een algemene stylesheet. Daardoor hoef je bijv. niet aan iedere <h2> style="color: red; font-size: 2rem; font-weight: bold; margin-bottom: 1.5rem;" toe te voegen. Scheelt een hoop code waardoor je site sneller laadt. Bovendien, stel dat je bijv. de kleur wilt wijzigen, dan hoef je dat maar op 1 plek te doen in plaats van op alle pagina's meerdere keren.
Kortom, leuk wat je aan het doen bent en helemaal prima. Maar sta ook even stil bij je keuze en vraag je af wat de daadwerkelijke meerwaarde is om het op deze manier te doen. Die reflectie is misschien niet makkelijk, omdat je er al veel werk in hebt gestopt. Maar wellicht zijn er betere keuzes die je kunt maken.
Sluit je daarbij niet af voor wat anderen te zeggen hebben.
Als anderen een punt hebben dat het overwegen waard is, moet je dat vooral overwegen.
Dat gezegd hebbende:
Je kunt met JavaScript inline styles (=CSS) toepassen per element, door te doen wat Rob hierboven al zei.
Elk element heeft een style attribuut, waarmee je in 1x al je CSS uit je variabele in kan stoppen.
Kijk ook hier eens naar:
- https://www.w3schools.com/TAGS/att_style.asp
- https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes
Merk op dat deze manier je site onnodig groot en traag maakt.
Dat wordt bijvoorbeeld een ding als het om een site gaat die voor een groter publiek toegankelijk moet zijn.
In dat geval kan je beter de inhoud van de variabelen via PHP serveren als een enkel .css-bestand met per variabele een css-klasse, en op hun beurt de css-klassen toewijzen aan de html-elementen.
Een andere meerwaarde van CSS is, dat je door layout consistent te maken het beheer vergemakkelijkt in je eigen CMS, omdat mensen niet iedere keer alle eigenschappen willen kiezen. Hierom maken zelfs tekstverwerkers als Microsoft Word en Neo Office intern gebruik van 'presets' die kunnen worden vertaald naar CSS-klassen.
Gewijzigd op 02/10/2023 08:29:55 door Ad Fundum
Ozzie PHP op 01/10/2023 23:50:50:
>> Maar wil gewoon een systeem wat helemaal zelf is gemaakt.
Niks mis mee, hoewel je er bijna niet aan ontkomt om ook externe libraries te gebruiken. Sterker nog, je gebruikt jQuery en dat ik ook een externe library. Als je echt alles zelf wil doen, dan zou je ook geen jQuery moeten gebruiken. Misschien is het eens zinvol (voor jezelf) om te overdenken waarom je per se alles zelf wil doen. Sommige bestaande dingen kun je prima implementeren in je eigen systeem. Dan is het nog steeds je eigen systeem, maar met wat externe extra's erbij.
Inline styling gebruik je eigenlijk alleen voor afwijkende zaken die je niet wil opnemen in je algemene stylesheet. Bijvoorbeeld een bepaald element dat op een specifieke pagina net iets meer margin moet hebben, of een afwijkend kleurtje. Voor al het overige gebruik je een algemene stylesheet. Daardoor hoef je bijv. niet aan iedere <h2> style="color: red; font-size: 2rem; font-weight: bold; margin-bottom: 1.5rem;" toe te voegen. Scheelt een hoop code waardoor je site sneller laadt. Bovendien, stel dat je bijv. de kleur wilt wijzigen, dan hoef je dat maar op 1 plek te doen in plaats van op alle pagina's meerdere keren.
Kortom, leuk wat je aan het doen bent en helemaal prima. Maar sta ook even stil bij je keuze en vraag je af wat de daadwerkelijke meerwaarde is om het op deze manier te doen. Die reflectie is misschien niet makkelijk, omdat je er al veel werk in hebt gestopt. Maar wellicht zijn er betere keuzes die je kunt maken.
Niks mis mee, hoewel je er bijna niet aan ontkomt om ook externe libraries te gebruiken. Sterker nog, je gebruikt jQuery en dat ik ook een externe library. Als je echt alles zelf wil doen, dan zou je ook geen jQuery moeten gebruiken. Misschien is het eens zinvol (voor jezelf) om te overdenken waarom je per se alles zelf wil doen. Sommige bestaande dingen kun je prima implementeren in je eigen systeem. Dan is het nog steeds je eigen systeem, maar met wat externe extra's erbij.
Inline styling gebruik je eigenlijk alleen voor afwijkende zaken die je niet wil opnemen in je algemene stylesheet. Bijvoorbeeld een bepaald element dat op een specifieke pagina net iets meer margin moet hebben, of een afwijkend kleurtje. Voor al het overige gebruik je een algemene stylesheet. Daardoor hoef je bijv. niet aan iedere <h2> style="color: red; font-size: 2rem; font-weight: bold; margin-bottom: 1.5rem;" toe te voegen. Scheelt een hoop code waardoor je site sneller laadt. Bovendien, stel dat je bijv. de kleur wilt wijzigen, dan hoef je dat maar op 1 plek te doen in plaats van op alle pagina's meerdere keren.
Kortom, leuk wat je aan het doen bent en helemaal prima. Maar sta ook even stil bij je keuze en vraag je af wat de daadwerkelijke meerwaarde is om het op deze manier te doen. Die reflectie is misschien niet makkelijk, omdat je er al veel werk in hebt gestopt. Maar wellicht zijn er betere keuzes die je kunt maken.
Bedankt voor je input. stel ik zeker ook op prijs. Ik maak zeker ook gebruik van een algemene stylesheet. De inline styling is namelijk ook bedoeld voor afwijkende instellingen zoals je ook zegt afwijkende fontkleur. Standaard is de fontkleur zwart. heb je echter een donkere achtergrondafbeelding, dan moet je de fontkleur wit worden. daar moet deze voor gebruikt worden. en je hebt helemaal gelijk wat betreft de jquery. dat is eingenlijk de enige externebron die ik gebruik. voor de rest vind ik het gewoon een uitdaging om de rest zelf te maken. en het systeem is nu tecnisch ook bijna klaar. daarna komt het afmaken van de interface en het koppelen van elementen aan formulieren etc.. dat is ook nog enorm veel werk. Maar wellicht dat als dit af is dat ik eens verder ga kijken hoe ik het systeem beter kan maken. Maar dat is voor de toekomst.
Toevoeging op 02/10/2023 10:18:28:
Ad Fundum op 02/10/2023 08:24:37:
Je moet het doen zoals je zelf denkt dat goed is.
Sluit je daarbij niet af voor wat anderen te zeggen hebben.
Als anderen een punt hebben dat het overwegen waard is, moet je dat vooral overwegen.
Dat gezegd hebbende:
Je kunt met JavaScript inline styles (=CSS) toepassen per element, door te doen wat Rob hierboven al zei.
Elk element heeft een style attribuut, waarmee je in 1x al je CSS uit je variabele in kan stoppen.
Kijk ook hier eens naar:
- https://www.w3schools.com/TAGS/att_style.asp
- https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes
Merk op dat deze manier je site onnodig groot en traag maakt.
Dat wordt bijvoorbeeld een ding als het om een site gaat die voor een groter publiek toegankelijk moet zijn.
In dat geval kan je beter de inhoud van de variabelen via PHP serveren als een enkel .css-bestand met per variabele een css-klasse, en op hun beurt de css-klassen toewijzen aan de html-elementen.
Een andere meerwaarde van CSS is, dat je door layout consistent te maken het beheer vergemakkelijkt in je eigen CMS, omdat mensen niet iedere keer alle eigenschappen willen kiezen. Hierom maken zelfs tekstverwerkers als Microsoft Word en Neo Office intern gebruik van 'presets' die kunnen worden vertaald naar CSS-klassen.
Sluit je daarbij niet af voor wat anderen te zeggen hebben.
Als anderen een punt hebben dat het overwegen waard is, moet je dat vooral overwegen.
Dat gezegd hebbende:
Je kunt met JavaScript inline styles (=CSS) toepassen per element, door te doen wat Rob hierboven al zei.
Elk element heeft een style attribuut, waarmee je in 1x al je CSS uit je variabele in kan stoppen.
Kijk ook hier eens naar:
- https://www.w3schools.com/TAGS/att_style.asp
- https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes
Merk op dat deze manier je site onnodig groot en traag maakt.
Dat wordt bijvoorbeeld een ding als het om een site gaat die voor een groter publiek toegankelijk moet zijn.
In dat geval kan je beter de inhoud van de variabelen via PHP serveren als een enkel .css-bestand met per variabele een css-klasse, en op hun beurt de css-klassen toewijzen aan de html-elementen.
Een andere meerwaarde van CSS is, dat je door layout consistent te maken het beheer vergemakkelijkt in je eigen CMS, omdat mensen niet iedere keer alle eigenschappen willen kiezen. Hierom maken zelfs tekstverwerkers als Microsoft Word en Neo Office intern gebruik van 'presets' die kunnen worden vertaald naar CSS-klassen.
Bedankt voor je input. Ik maak bijna ook alleen gebruik van classes en een algemene stylsheet. maar soms moet een tekst gewoon vetgedrukt zijn of een andere kleur hebben of juist gecentreerd worden. etc etc.. je komt niet altijd om inline styling heen. wel kan ik zelf per element gewoon instellen wat mogelijk is.
Toevoeging op 02/10/2023 10:20:15:
Rob Doemaarwat op 01/10/2023 14:29:13:
On topic ... : Met jQuery .attr() kun je deze ophalen: $('#titel1').attr('style'));
Bedankt voor de tip. werkt inderdaad goed.
Gewijzigd op 02/10/2023 10:12:18 door Paul Weiss