Modification des propriétés CSS via JavaScript

J'ai besoin d'une fonction pour changer l'apparence de certains éléments de ma page HTML "à la volée", mais je ne suis pas capable de le faire.Modification des propriétés CSS via JavaScript

Le problème est que je ne peux pas utiliser une commande comme

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

parce que je dois appliquer les changements lorsque la page est déjà chargée, en utilisant un lien comme

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

et je ne peux pas utiliser une commande comme

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

parce que je ne sais pas si elle peut être appliquée à d'autres pas si cas faciles, car j'ai besoin de changer l'apparence des éléments tels que td.myclass ou des éléments frères tels que th[scope=col]+th[scope=col]+th[scope=col].

Comment puis-je faire? Merci!

Source

2010-03-14 tic

Merci pour toutes vos réponses. J'ai voté tous parce que chacun a enseigné quelque chose que je ne connaissais pas. J'ai accepté celui qui pour mon problème est le plus simple à suivre. – tic

Les feuilles de style peuvent être manipulés directement JS avec le document.styleSheets list.

Exemple:

<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>

L'exemple est par Mozilla et collaborateurs copié à partir de:

Using dynamic styling information - Web API Interfaces | MDN

Source

2010-03-14 10:26:26 kennytm

Cela semble être une douleur incroyable dans le cul. Vous devez soit examiner la propriété 'cssText' de chaque objet' CSSRule' dans chaque collection 'cssRules' dans chacun des objets' CSSStyleSheet', soit utiliser la règle correspondante dans un ordre spécifique dans le (imbriquées) collections. –

Vous pouvez utiliser l'attribut id pour autant d'éléments que vous le souhaitez, mais ils doivent être uniques. Vous pouvez également utiliser l'attribut class, mais pour trouver l'élément spécifique que vous voulez, il sera un peu plus dur. Puis, en utilisant JavaScript, vous pouvez utiliser la fonction document.getElementById pour récupérer l'objet DOMElement sur lequel définir les propriétés CSS. Pour les classes, vous devez d'abord obtenir tous les éléments avec le nom de tag spécifié en appelant document.getElementsByTagName, puis en parcourant le tableau résultant et en vérifiant si chaque élément a le nom de classe fourni, et si c'est le cas, en ajoutant à un tableau, après que la boucle soit retournée.

Source

2010-03-14 10:21:41

Si vous souhaitez utiliser comme sélecteur complexe th[scope=col], utilisez jQuery

Source

2010-03-14 10:23:47

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

Exemple:

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

Si vous voulez changer tout td.myclass

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

Source

2010-03-14 17:14:11 gmunkhbaatarmn

Cette syntaxe n'est pas correcte; la manière standard consiste à utiliser camelCase, par ex. 'myObj [i] .style.backgroundColor'. Mais un point suivi d'un crochet n'est pas valide JavaScript. – Ryan

Vous pouvez facilement accéder et modifier les CSS propery de tout DOM en définissant les propriétés de l'objet de style. à-dire de changer la couleur de fond d'un élément DOM avec id de #yourid vous le faites

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

Notez que les propriétés CSS qui sont composées de deux noms séparés par un trait d'union, par exemple background-color, font-size sont transformé en notation camelCase, i.backgroundColor et fontSize alors que les propriétés à un seul libellé conservent leurs noms respectifs

Source

2011-01-23 17:49:33 dade

Il serait utile de modifier directement les propriétés CSS afin qu'elles s'appliquent aux éléments ajoutés dynamiquement. –

<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>

Source

2012-08-12 10:31:25 GLES

Modification des propriétés CSS via JavaScript

Répondre

Questions connexes