hoe hele styling opslaan in variable

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Paul Weiss

Paul Weiss

01/10/2023 12:07:52
Quote Anchor link
Hoi.

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)
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
<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>
 
PHP hulp

PHP hulp

12/12/2024 16:12:25
 
- Ariën  -
Beheerder

- Ariën -

01/10/2023 13:02:21
Quote Anchor link
Waarom geen CSS-stylesheets?
 
Paul Weiss

Paul Weiss

01/10/2023 13:29:58
Quote Anchor link
Omdat de styling element gebonden is. natuurlijk zou ik per element ook een aparte stylesheet kunnen aanmaken. Maar zo heb ik hele systeem daarop nog niet gebouwd. wellicht iets voor later. Op dit moment werk ik met font color, text -align etc.. dus met inline styling

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
 
- Ariën  -
Beheerder

- Ariën -

01/10/2023 13:35:42
Quote Anchor link
Het maakt het alleen niet overzichtelijker. Eigenlijk is je hele CMS systeem vrij apart, als ik zo teruglees. Ook is er weinig bewegingsvrijheid om een site te bouwen.

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 -
 
Paul Weiss

Paul Weiss

01/10/2023 13:39:26
Quote Anchor link
is geen echt cms systeem heb. bovendien wordt inoine styling bij cms altijd gebruikt.
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.
 
- Ariën  -
Beheerder

- Ariën -

01/10/2023 13:44:08
Quote Anchor link
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. ;-)
 
Rob Doemaarwat

Rob Doemaarwat

01/10/2023 14:29:13
Quote Anchor link
On topic ... : Met jQuery .attr() kun je deze ophalen: $('#titel1').attr('style'));
 
Paul Weiss

Paul Weiss

01/10/2023 22:46:12
Quote Anchor link
- 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. ;-)


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

Ozzie PHP

01/10/2023 23:50:50
Quote Anchor link
>> 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.
 

02/10/2023 08:24:37
Quote Anchor link
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.
Gewijzigd op 02/10/2023 08:29:55 door
 
Paul Weiss

Paul Weiss

02/10/2023 10:11:41
Quote Anchor link
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.


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.


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
 



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.