Rechercher : dans
Par :

[JAVASCRIPT-DOM] propriété classe CSS

Dernière réponse le 6 mar 2009 à 12:54:05 sixland, le 22 jun 2005 à 12:31:53 
 Signaler ce message aux modérateurs

Bonjour,
je dois recuperer la propriété de style d'un élément html, cette propriété est contenue dans une feuille de style .css qui est contenu dans une classe css.

si la propriété est declarée dans la balise avec l'attribut 'style' je sais la recuperer mais qd c'est dans une class je n'y arrive pas

en fait j'utilise un

...
alert (document.getElementById('truc').style.height);
...


sixland

Meilleures réponses pour « [JAVASCRIPT DOM] propriété classe CSS » dans :
Javascript - Librairies d'effets pour vos images VoirAu gré de vos explorations du web, vous avez vu de superbes effets de présentation des images. Et ça vous plairaît bien de pouvoir proposer les mêmes à vos visiteurs. Voici quelques solutions en Javascript couplées à des CSS. Elles sont plus...
Les CSS pour présenter vos images VoirPour présenter agréablement vos images, vous pouvez intégrer quelques codes supplémentaires dans votre CSS et vous en servir à bon escient. Elles sont bien sur modulables en fonction de la charte graphique de votre site. Utilisation Mettez les codes...
Popup en CSS, sans Javascript VoirVoici comment réaliser une popup d'information en pure CSS, sans Javascript. L'astuce est d'utiliser :hover de manière à utiliser des CSS différents au passage du curseur. Parmis les attributs CSS modifiés, on utilise display:none afin de...
Les classes de style (CSS) VoirLes classes et les ID Les classes Il peut s'avérer intéressant d'affecter des styles différents à des mêmes balises. Pour cela les spécifications CSS ont introduit le concept de classe. La définition des classes est aussi simple que celles des...
La syntaxe des style (CSS) VoirDéfinition d'un style La définition d'un style se fait à l'aide de règles en texte simple permettant de décrire l'aspect des éléments de la page. Une règle CSS est caractérisée par deux principaux éléments : Un sélecteur de balises, permettant de...
Javascript - l'objet Array VoirLes particularités de l'objet Array L'objet Array est un objet du noyau Javascript permettant de créer et de manipuler des tableaux. Voici la syntaxe à utiliser pour créer une variable tableau : var x = new Array(element1[, element2, ...]); Si...

1

HackTrack, le 24 jun 2005 à 13:42:54
  • +9

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
	<title>Accès aux valeurs CSS avec Javascript</title>

	<link rel="stylesheet" type="text/css" href="testCss.css" />
	<script language="javascript" type="text/javascript">
	function testCss(tagRef,element){
	  alert("L'attribut '"+element+"' du tag '"+tagRef+"' a la valeur '"+getCssValue(tagRef,element)+"'");				 
	}
			
	function getCssValue(tagRef,element) {
	  var tag = document.all(tagRef);
	  var value= tag.style[element];
	  if(value==null || value=='' || value=='undefined'){
	    var aClass = tag.className;
	    var cssRules = 'rules';
	    for (var sSheet=0; sSheet < document.styleSheets.length; sSheet++){
	      for (var rule=0; rule < document.styleSheets[sSheet][cssRules].length; rule++) {
		    var currentClass = document.styleSheets[sSheet][cssRules][rule].selectorText.substring(1);
	        if (currentClass == aClass) {
	          return document.styleSheets[sSheet][cssRules][rule].style[element];
	        }
	      }
	    }
	  }
	  return  value;
	}			
	</script>
</head>

<body>
	<span id="truc1" style="color: blue;">
	  	   Div de test 1
	</span>
	<br/>
	<span id="truc2" class="myClass">
	  	   Div de test 2
	</span>
	<br/>
	<button onclick="testCss('truc1','color');testCss('truc2','color');">Cliquer pour tester</button>
</body>
</html>


;-)
HackTrack

Répondre à HackTrack

2

sixland, le 26 jun 2005 à 19:58:27

Merci c'est juste ce qu'il me fallait sixland

Répondre à sixland

3

survivor, le 2 jun 2008 à 15:26:20

Génial plusieurs heures que je cherchais comment modifier la classe d'une div, className n'étant pas référencé dans dreamweaver.

Répondre à survivor

4

GexMole, le 11 fév 2009 à 17:23:58
  • +2

Yop, tout le monde !!

ATTENTION Je viens de tester ce petit script et surprise, il ne marche ni sous IE ni sous FF...

Depuis le tps les choses on bien changés :$

Si qqun a trouvé une solution alternative ^^

Répondre à GexMole

5

CSS, le 6 mar 2009 à 12:02:59
  • +3

Pour lire ou modifier les propriétés CSS inline ou d'une feuille externe, pour FireFox, Internet Explorer, Safari, Opera, voir ce site : http://www.quirksmode.org/dom/w3c_css.html

Répondre à CSS

6

CSS, le 6 mar 2009 à 12:30:57
  • +3

Pour lire ou modifier les propriétés CSS inline ou d'une feuille externe, pour FireFox, Internet Explorer, Safari, Opera, voir ce site : http://www.quirksmode.org/dom/w3c_css.html (mise à jour 02/02/2009).

En résumé :

- Accès/modification des styles inline

IE, opera : x.currentStyle

IE : window.getComputedStyle(x,null).color

W3C : x.style


- Accès aux styles des feuilles de styles

FF, opera : document.styleSheets[1].cssRules[1]

IE : document.styleSheets[1].imports

safari : document.styleSheets[1].rules[1]

document.styleSheets[1]


- Modification des sytles des feuilles de styles

IE, safari : document.styleSheets[1].addRule('pre', 'font: 14px verdana')

FF, safari, opera : document.styleSheets[1].deleteRule(1)

var x = document.styleSheets[1];
x.insertRule('pre {font: 14px verdana}',x.cssRules.length)

document.styleSheets[1].removeRule(1)


- Propriétés

x.style.cssText

document.styleSheets[1].cssText

document.styleSheets[1].cssRules[1].cssText

document.styleSheets[1].cssRules[1].style.cssText

document.styleSheets[1].disabled = true

document.styleSheet[0].href

document.styleSheets[1].cssRules[1].selectorText


- Divers

document.createStyleSheet('extrastyle.css')

document.styleSheets[1].cssRules[1].style.getPropertyPriorit­y('color')

document.getElementById('test').style.getPropertyValue('colo­r')
document.styleSheets[1].cssRules[1].style.getPropertyValue('­color')

document.styleSheets[1].ownerNode

document.styleSheets[1].cssRules[1].parentStyleSheet

document.styleSheets[1].cssRules[1].style.removeProperty('co­lor')
document.getElementById('test').style.removeProperty('color'­)

x.style.setProperty('color','#00cc00',null)
document.styleSheets[1].cssRules[1].style.setProperty('color­','#00cc00',null)

Répondre à CSS

7

 GexMole, le 6 mar 2009 à 12:54:05
  • +1

Merci c'est exactement ce qui me falais ^^

Répondre à GexMole
Collection CommentÇaMarche.net