Obter / definir valores de propriedade CSS via Javascript: perguntas
Algumas coisas não estão claras para mim:
var myDiv = document.getElementById("myDiv");
var computedStyle = window.getComputedStyle(myDiv);
1) Não é possível obter diretamente a cor da borda global de um div se houver apenas uma cor, o mesmo para cada lado:
computedStyle.getPropertyValue("border-color");
Em vez de fazer:
computedStyle.getPropertyValue("border-left-color");
OU
computedStyle.getPropertyValue("border-right-color");
OU
computedStyle.getPropertyValue("border-top-color");
...
2) Ao ter propriedades de estilo em um arquivo CSS, elas só podem ser acessadas pelo método getComputedStyle e não pela propriedade style, como propriedades de estilo definidas em linha, por meio de um atributo style no div, estou certo?
myDiv.style.getPropertyValue("border-left-color");
Isso não vai funcionar.
3) Se quisermos definir uma propriedade de estilo, temos que usar o atributo style do elemento, não é possível usar o objeto de estilo computado?
computedStyle.setProperty("border-color", "yellowgreen", null);
Eu pensei que usar o atributo style era a "maneira antiga de fazer", como usar o atributo inline style ou usar object.style.style = value para definir uma propriedade de estilo em Javascript.
Obrigado.
jsFiddle:http://jsfiddle.net/pgtFR/12/