Cambiando propiedades de CSS a través de JavaScript

Necesito una función para cambiar la apariencia de algunos elementos en mi página HTML "sobre la marcha", pero no puedo hacerlo.Cambiando propiedades de CSS a través de JavaScript

El problema es que no puedo usar un comando como

document.write ('<style type="text/css">body {background-color: #cccccc;}</style>');

porque necesito hacer efectivos los cambios cuando la página ya está cargado, utilizando un enlace como

<a onmouseclick="Clicker(1)" href="#">clic</a>

y no puedo utilice un comando como

document.body.style.background = '#cccccc';

porque no sé si se puede aplicar a otros no tan casos fáciles, porque necesito cambiar la apariencia de elementos como td.myclass o elementos hermanos como th[scope=col]+th[scope=col]+th[scope=col].

¿Cómo puedo hacerlo? ¡Gracias!

Fuente

2010-03-14 tic

Gracias por responder todas sus preguntas. Los voté a todos porque cada uno ha enseñado algo que yo no sabía. Acepté el que para mi problema es el más simple de seguir. – tic

Las hojas de estilo pueden ser manipulados directamente en JS con el document.styleSheets list.

Ejemplo:

<html> 
<head> 
<title>Modifying a stylesheet rule with CSSOM</title> 
<style type="text/css"> 
body { 
background-color: red; 
} 
</style> 
<script type="text/javascript"> 
var stylesheet = document.styleSheets[1]; 
stylesheet.cssRules[0].style.backgroundColor="blue"; 
</script> 
<body> 
The stylesheet declaration for the body's background color is modified via JavaScript. 
</body> 
</html>

El ejemplo es por Mozilla Colaboradores y copió a partir de:

Using dynamic styling information - Web API Interfaces | MDN

Fuente

2010-03-14 10:26:26 kennytm

Parece que sería un dolor increíble en el culo. Tendría que examinar la propiedad 'cssText' de cada objeto' CSSRule' en cada colección 'cssRules' en cada uno de los objetos' CSSStyleSheet' o tendría que confiar en que la regla relevante está en un orden específico en el colecciones (anidadas) –

Puede usar el atributo id para todos los elementos que quiera, pero deben ser exclusivos. También puede usar el atributo class, pero encontrar el elemento específico que desea será un poco más difícil.

Luego, usando JavaScript, puede usar la función document.getElementById para recuperar el objeto DOMElement para establecer propiedades CSS. Para las clases, primero necesitará obtener todos los elementos con el nombre de etiqueta especificado llamando al document.getElementsByTagName, luego iterando sobre la matriz resultante y verificando si cada elemento tiene el nombre de clase proporcionado, y si lo hace, luego agregue a una matriz, que después de que se devuelve el ciclo

Fuente

2010-03-14 10:21:41

Si desea utilizar el selector complejo como th[scope=col], utilice jQuery

Fuente

2010-03-14 10:23:47

document.getElementsByClassName('myclass')[NUMBER].style['background-color'] = '#ccc';

Ejemplo:

document.getElementsByClassName('myclass')[0].style['background-color'] = '#ccc'; 
document.getElementsByClassName('myclass')[1].style['background-color'] = '#ccc';

Si desea cambiar todo td.myclass

var myObj = document.getElementsByClassName('myclass'); 
for(var i=0; i<myObj.length; i++){ 
    myObj[i].style['background-color'] = '#ccc'; 
}

Fuente

2010-03-14 17:14:11 gmunkhbaatarmn

Esa sintaxis no es correcta; la forma estándar es usar camelCase, p. 'myObj [i] .style.backgroundColor'. Pero un punto seguido de un corchete no es JavaScript válido. – Ryan

Puede acceder y modificar fácilmente Propery CSS de cualquier DOM estableciendo las propiedades del objeto de estilo. es decir, para cambiar el color de fondo de un elemento DOM con id de #yourid haces esto

document.getElementById('yourid').style.backgroundColor = "#f3f3f3";

nota de que las propiedades CSS que se componen de dos nombres separados por un guión, es decir, color de fondo, tamaño de fuente son convertido en la notación camelCase, i.e backgroundColor y fontSize mientras que las propiedades de una sola palabra conservan sus respectivos nombres

Fuente

2011-01-23 17:49:33 dade

Sería útil modificar las propiedades de CSS directamente para que se apliquen a los elementos añadidos dinámicamente. –

<html> 
<head> 
    <style type="text/css"> 
    html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, img, ol, ul, 
    li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
    font-family:Segoe UI, sans-serif; 
    } 
    .header, .container, .footer { 
    min-height:100px; 
    } 
    .header { 
    background-color:#757575; 
    } 
    .container { 
     background-color:#cccccc; 
    } 
    .footer { 
    background-color:#757575; 
    } 
    .header, .footer, .column { 
    text-align:center; 
    } 
    .column { 
    float:left; 
    min-width:300px; 
    border-left:1px solid blue; 
    border-right:1px solid blue; 
    margin-left:10px; 
    } 
    </style> 
    <script type="text/javascript"> 
    function headerContentFooter(headerRatio, footerRatio) { 
    totalHeight = document.height; 
    headerHeight = 0; 
    containerHeight = 0; 
    footerHeight = 0; 
    if(headerRatio < 0.5 && footerRatio < 0.5) { 
    headerHeight = totalHeight * headerRatio; 
    footerHeight = totalHeight * footerRatio; 
    containerHeight = totalHeight - (headerHeight + footerHeight); 
    document.getElementsByClassName("header")[0].style.height = "" + headerHeight + "px"; 
    document.getElementsByClassName("container")[0].style.height = "" + containerHeight + "px"; 
    document.getElementsByClassName("footer")[0].style.height = "" + footerHeight + "px"; 
    document.getElementsByClassName("header")[0].style.minHeight = "" + headerHeight + "px"; 
    document.getElementsByClassName("container")[0].style.minHeight = "" + containerHeight + "px"; 
    document.getElementsByClassName("footer")[0].style.minHeight = "" + footerHeight + "px"; 
    document.getElementsByClassName("header")[0].style.maxHeight = "" + headerHeight + "px"; 
    document.getElementsByClassName("container")[0].style.maxHeight = "" + containerHeight + "px"; 
    document.getElementsByClassName("footer")[0].style.maxHeight = "" + footerHeight + "px"; 
    } 
    } 
    </script> 
</head> 
<body> 
    <div class="header">HEADER</div> 
    <div class="container"> 
    <div class="column">LEFT</div><div class="column">CENTER</div><div class="column">RIGHT</div> 
    </div> 
    <div class="footer">FOOTER</div> 
    <script type="text/javascript"> 
    headerContentFooter(0.05, 0.05); 
    </script> 
</body> 
</html>

Fuente

2012-08-12 10:31:25 GLES

Cambiando propiedades de CSS a través de JavaScript

Respuesta

Cuestiones relacionadas