Matti Mäkitalo: [disabled] oder :disabled für formular-styling

Beitrag lesen

Hi,

Ein kurzer Test in Chrome hat ergeben, dass folgender Code nach einem Klick den [disabled]-Style annimmt, das Attribut wird also in den HTML-Code eingefügt
<input type="text" onclick="this.disabled = true" name="Test" id="Test" value="Beispiel">

Das entspricht nicht der Theorie, denn der obige Code fügt eben *kein* Attribut hinzu, sondern nur eine Eigenschaft des Element-Objekts.

Ich habe mit FF5 getestet, weil ich dachte, der Unterschied besteht darin, dass [disabled] nur auf Vorhandensein von @disabled prüft und :disabled, ob disabled tatsächlich aktiv ist, aber auch das kann ich negieren.

Ohne das in weiteren Browsern ausprobiert zu haben: ich sehe derzeit keinen Unterschied.

Testcase:

<!DOCTYPE html>  
<html>  
	<head>  
		<meta charset='utf-8' />  
		<title></title>  
		<style type='text/css'>  
*[disabled] {  
	background-color:red;  
}  
		</style>  
	</head>  
	<body>  
		<form>  
			<input type='text' id='ttt'>  
			<button id='btn'>Klick</button>  
		</form>  
		<script type='text/javascript'>  
			var ttt = document.getElementById('ttt');  
			  
			var btn = document.getElementById('btn');  
			btn.onclick = function(e) {  
				ttt.disabled = ! ttt.disabled;  
				e.preventDefault();  
			};  
		</script>  
	</body>  
</html>  

Bis die Tage,
Matti