[JS] style property zetten?

[Bozozo]

Het is mogelijk om een CSS property als volgt uit te lezen:

JavaScript:

var propNotationToCSS = new Array();
propNotationToCSS["backgroundColor"] = "background-color";
propNotationToCSS["color"] = "color";

//Gecko
if (window.getComputedStyle) rgbval = window.getComputedStyle(currentEl,null).getPropertyValue(propNotationToCSS[currentprop]);
//IE
else if (currentEl.currentStyle) rgbval = currentEl.currentStyle[currentprop];

Het propNotationToCSS array is de vertaling van hoofdletter-notatie naar streepjes-notatie. Dat is nodig omdat de gecko-methode de ene notatie vergt en de IE-methode de andere aanpak.

Dit werkt naar behoren. Nu wil ik die properties niet alleen uitlezen, maar ook kunnen schrijven. Daarvoor kan ik geen equivalente functie(s) vinden. Uit armoe doe ik het nu maar zo:

JavaScript:

eval("currentEl.style."+currentprop+" = '"+newcolor+"'");

Dat werkt op zich wel, maar is toch niet erg netjes. Weet iemand de juiste manier om een style property (uit een variabele) te zetten?

[Verwijderd]

JavaScript:

currentEl.style[currentprop] = newcolor;

[Zoefff]

JavaScript:

var body = document.body;
var property = 'backgroundColor';
var value = 'red';

body.style[property] = value;

Werkt toch gewoon? Of zie ik iets over het hoofd wat je bedoelt?

Verder, voor zover ik weet, kan je gewoon de property van een element direct opvragen (dus zonder getPropertyValue() met

JavaScript:

window.getComputedStyle(element, null).backgroundColor;

en kan je er, als het goed is, van uit gaan dat alle styles worden omgeschreven naar camelcase op de plek van het streepje. Je hoeft dus geen array met styles te maken, je kan dat gewoon automagisch doen

Zie ook crisp hieronder en Blues hierboven. Ik lop achter de feiten aan

[ Voor 56% gewijzigd door Zoefff op 09-05-2008 23:45 ]

[crisp]

En voor het omzetten van camelCase naar 'min-notatie' en vice versa:

JavaScript:

var prop = 'background-color';

var camel = prop.replace(/-([a-z])/g, function($0,$1) { return $1.toUpperCase(); });

alert(camel);

var noncamel = camel.replace(/[A-Z]/g, function($0) { return '-' + $0.toLowerCase(); });

alert(noncamel);

[Bozozo]

Ah een regexp is wel een goed idee ja.

Ik gebruik trouwens getPropertyValue omdat ik van tevoren niet weet welke property uitgelezen gaat worden. Ik wist niet dat je het style object als array kon benaderen , dat vergemakkelijkt de boel nogal

Bedankt maar weer.

[Verwijderd]

Bozozo schreef op zaterdag 10 mei 2008 @ 10:41:
Ik wist niet dat je het style object als array kon benaderen , dat vergemakkelijkt de boel nogal

Je benadert het niet als array, maar als object:

JavaScript:

var o = new Object();
o.myProperty = 'value';
alert(o.myProperty);  // "value"
alert(o['myProperty']);  // "value"

// dit werkt voor alle soorten objecten en ook voor methods
window['alert']('hallo');