Buenas,
aunque la forma de incluir las nuevas reglas mediante la creación de un nuevo elemento, ya sea link o style, evita tener que usar métodos, que aunque están definidos en el estandar, explorer no sigue, y nos obligaría a incluir en nuestro código una alternativa para ese navegador, eso no evita los problemas inherentes del lenguaje CSS relacionados con el orden en cascada de las hojas de estilos. Es por eso por lo que no es práctico trabajar directamente sobre hojas de estilos. Por ejemplo:
Siguiendo con el ejemplo de @Panino5001 y modificándolo un poco (espero que no te importe), si al div con id 'pp' al que vamos a aplicar la nueva regla css para modificar las propiedades width, height y background-color le hubiéramos definido previamente otros valores para esas propiedades: a height mediante el atributo style, a width mediante la etiqueta <style></style> y a background-color mediante la propiedad .style.backgroundColor, al aplicar la nueva regla con la que suponemos queremos cambiar los 3 valores, sólo se cambiará el de la propiedad width ya que los estilos en línea (atributo y propiedad style) tienen prioridad en el orden de cascada y lo que se incluye con la etiqueta style es como si se hiciera en una hoja de estilos externa y modifica el valor existente por incluirlo después, ya que prevalece el último valor declarado (si lo incluyeramos antes de la etiqueta que ya existe tampoco cambiaría).
Si definimos los estilos como ficheros .css o con la etiqueta <style> no dispondríamos de su valor a través de la propiedad .style y para conocer estos valores tendríamos que recurrir a las estilos computados. Como se ve en la función css del ejemplo de Panino explorer también tiene sus propias propiedades y esto también complica nuestro código. Además el estilo computado es el valor calculado después de analizar todas las reglas que están afectadas por ese estilo para ese elemento y de pasar a absolutas todas las medidas y obliga a hacer más cálculos ya que cada vez que cambie una propiedad habría que volver a calcularlo.
Código HTML:
Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
function addCss(cssCode,i) {
var control=document.getElementById(i)
if(control)
document.getElementsByTagName("head")[0].removeChild(control)
var styleElement = document.createElement("style");
styleElement.type = "text/css";
if (styleElement.styleSheet) {
styleElement.styleSheet.cssText = cssCode;
} else {
styleElement.appendChild(document.createTextNode(cssCode))
}
styleElement.id =i;
document.getElementsByTagName("head")[0].appendChild(styleElement);
}
function t(id){return document.getElementById(id);}
function css(id,prop){
var valor;
if(window.getComputedStyle){
valor = window.getComputedStyle(t(id),null).getPropertyValue(prop);
}
else{
var re = /(-([a-z]){1})/g;
if (re.test(prop)) {
prop = prop.replace(re, function () {
return arguments[2].toUpperCase();
});
}
valor = t(id).currentStyle[prop] ? t(id).currentStyle[prop] : null;
}
return valor;
}
onload=function(){
t('pp').style.backgroundColor = 'yellow'; <!-- definicion original prop. background-color -->
<!-- calculamos los valores computados originales -->
var heightCompu = css('pp','height'); <!-- definido con atribute style -->
var widthCompu = css('pp', 'width'); <!-- definido con etiqueta <style></style> -->
var backgCompu = css('pp', 'background-color'); <!-- definido con propiedad .style -->
alert('height computado original: ' + heightCompu + ' height con style: ' + t('pp').style.height);
<!-- el valor de la prop. style.width sale en blanco porque se definió como hoja de estilos externa -->
alert('width computado original: ' + widthCompu + ' width con style (sale en blanco): ' + t('pp').style.width);
alert('background computado original: ' + backgCompu + ' background con style: ' + t('pp').style.backgroundColor);
<!-- añadimos una nueva regla a la hoja de estilos mediante una nueva etiqueta <style></style> -->
addCss('#pp{background-color:red; width:20%; height:100px;}',new Date().getTime());
<!-- solo cambia la prop. width por la prioridad de la cascada de las hojas de estilo -->
alert('nuevo height computado: (no cambia) ' + heightCompu + ' height con style: ' + t('pp').style.height);
<!-- el valor de la prop. style.width sigue saliendo en blanco porque se ha cambiado en la hoja de estilos externa -->
alert('width computado: (cambia pero no se ha actualizado) ' + widthCompu + ' width con style (sigue en blanco) : ' + t('pp').style.width);
alert('background computado: (no cambia) ' + backgCompu + ' background con style: ' + t('pp').style.backgroundColor);
<!-- para disponer del valor del width a través de .style.width habría que usar esa prop. para cambiar el valor -->
t('pp').style.width = '40%';
alert('width computado: (no se actualiza) ' + widthCompu + ' width con style (valor correcto): ' + t('pp').style.width);
<!-- hay que volver a calcular los valores computados -->
widthCompu = css('pp', 'width');
alert('width computado: (actualizado) ' + widthCompu + ' width con style (valor correcto): ' + t('pp').style.width);
}
#pp {width: 30%;}
<div id="pp" style="height:200px;"></div>