{"id":225,"date":"2012-09-14T12:30:20","date_gmt":"2012-09-14T11:30:20","guid":{"rendered":"https:\/\/kineo.de\/blog\/?p=225"},"modified":"2012-09-14T12:36:28","modified_gmt":"2012-09-14T11:36:28","slug":"style-angaben-onclick-andern","status":"publish","type":"post","link":"https:\/\/kineo.de\/blog\/html\/style-angaben-onclick-andern\/","title":{"rendered":"Style Angaben onclick \u00e4ndern"},"content":{"rendered":"

F\u00fcr eine \u00c4nderung der Style Angaben mittels onClick gibt es verschiedene Ans\u00e4tze.
\nBeispielsweise mittels der Methoden:
\ngetElementById() <\/strong>| getElementsByName()<\/strong> | getElementsByTagName()<\/strong>
\nvgl.: https:\/\/de.selfhtml.org\/javascript\/objekte\/document.htm<\/a><\/p>\n

getElementById()<\/strong> ist eigentlich selbsterkl\u00e4rend:
\ndocument.getElementById('meineID').style.background='#ffffff'<\/code>
\nHier bekommt die ID #meineID<\/strong> die Hintergrundfarbe weiss. Die ggf. urspr\u00fcnglichen vorhandenen Style Angaben werden nicht mehr verwendet.
\nDas funktioniert bei den anderen Methoden genauso.<\/p>\n

Etwas kniffliger wird es wenn man css Klassen (class=““) \u00a0\u00e4ndern m\u00f6chte.<\/strong>
\nDaf\u00fcr kann man querySelectorAll<\/strong> verwenden. Da Klassen mehrfach vorkommen k\u00f6nnen, ben\u00f6tigen wir etwas mehr Code:
\nfor (var i = 0; i < document.querySelectorAll(\".foo\").length; i++) {
\ndocument.querySelectorAll(\".foo\")[i].style.fontSize = \"150%\"; }<\/code>
\nHier bekommen alle Elemente der Klasse .foo eine Font Gr\u00f6sse von 150%.
\n Mehrfach Verwendung mittels Komma trennen.<\/em><\/p>\n

Sollen nur auf das erste<\/strong> vorkommende Element zugegriffen werden, kann die Methode querySelector()<\/strong> benutzt werden:
\ndocument.querySelector(\".foo\").style.fontSize = \"150%\";<\/code><\/p>\n

Beispiel:
\n<\/span><\/strong>Es sollen gleichzeitig die Selektoren h1<\/strong>, p<\/strong> und die Klasse foo<\/strong> einen Schriftgrad von 150% erhalten,\u00a0das Element oder der Container mit der ID #meineId <\/strong>650 Pixel breit werden und die Hintergrundfarbe weiss bekommen:
\n Aufruf:<\/span> <a href=“javascript:gross ()“>Gross machen<\/a><\/strong>
\nfunction gross () {
\nfor (var i = 0; i < document.querySelectorAll(\"h1, p, .foo\").length; i++) {
\ndocument.querySelectorAll(\"h1, p, .foo\")[i].style.fontSize = \"150%\"; }
\ndocument.getElementById('meineID').style.width='650px';
\ndocument.getElementById('meineID').style.background='#ffffff'
\n}<\/code>
\nACHTUNG:
\nSelektoren, welche einen Bindestrich enthalten, werden in dieser Schreibweise nicht verarbeitet und in der Regel zusammengeschrieben:
\nfontSize, marginLeft, etc\u2026. \u00a0vgl.:
\nhttps:\/\/www.w3schools.com\/cssref\/pr_margin-left.asp<\/a>
\nhttps:\/\/www.w3schools.com\/jsref\/prop_style_marginleft.asp<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

F\u00fcr eine \u00c4nderung der Style Angaben mittels onClick gibt es verschiedene Ans\u00e4tze. Beispielsweise mittels der Methoden: getElementById() | getElementsByName() | getElementsByTagName() vgl.: https:\/\/de.selfhtml.org\/javascript\/objekte\/document.htm getElementById() ist eigentlich selbsterkl\u00e4rend: document.getElementById(‚meineID‘).style.background=’#ffffff‘ Hier bekommt die ID #meineID die Hintergrundfarbe weiss. Die ggf. urspr\u00fcnglichen vorhandenen Style Angaben werden nicht mehr verwendet. Das funktioniert bei den anderen Methoden genauso. Etwas kniffliger […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16,8,31],"tags":[35,7,30],"class_list":["post-225","post","type-post","status-publish","format-standard","hentry","category-css","category-html","category-javascript","tag-css","tag-javascript","tag-onclick"],"_links":{"self":[{"href":"https:\/\/kineo.de\/blog\/wp-json\/wp\/v2\/posts\/225","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kineo.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kineo.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kineo.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kineo.de\/blog\/wp-json\/wp\/v2\/comments?post=225"}],"version-history":[{"count":12,"href":"https:\/\/kineo.de\/blog\/wp-json\/wp\/v2\/posts\/225\/revisions"}],"predecessor-version":[{"id":234,"href":"https:\/\/kineo.de\/blog\/wp-json\/wp\/v2\/posts\/225\/revisions\/234"}],"wp:attachment":[{"href":"https:\/\/kineo.de\/blog\/wp-json\/wp\/v2\/media?parent=225"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kineo.de\/blog\/wp-json\/wp\/v2\/categories?post=225"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kineo.de\/blog\/wp-json\/wp\/v2\/tags?post=225"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}