Style dynamique CSS DOM
Style dynamique CSS DOM
Utilisez JS pour faire fonctionner chaque attribut en CSS.
JS ne peut utiliser ou modifier que les styles en ligne. Par exemple : imgObj.style.border = ? 1px solid red ?
Pour les styles de classe, attribuez des valeurs via className. Par exemple?: imgObj.className = ??imgClass??
objet de style
Chaque balise HTML possède un attribut de style. Mais cet attribut de style est aussi un objet de style.
Alors, quels sont les attributs de cet objet de style ? Les attributs de l'objet style correspondent aux attributs en CSS one-to-one.
Par conséquent, l'objet style est utilisé à la place du CSS.
Par exemple?: imgObj.style.border = "1px solid red";
Conversion des attributs d'objet de style et des attributs CSS
S'il s'agit d'un mot, les attributs d'objet de style, et Attributs CSS Idem.
S'il y a plusieurs mots, le premier mot doit être entièrement en minuscules, la première lettre de chaque mot suivant doit être en majuscule et le trait de soulignement doit être supprimé.
divObj.style.backgroundColor = "rouge";
divObj.style.backgroundImage = "url(images /bg.gfi)";
divObj.style.fontSize = "18px";
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<script type="text/javascript">
//網(wǎng)頁加載完成
window.onload = init;
function init()
{
//獲取id=img01的圖片對象
var imgObj = document.getElementById("img1");
//給<img>標(biāo)記添加行內(nèi)樣式
imgObj.style.width = "400px";
imgObj.style.border = "2px solid red";
imgObj.style.padding = "20px 30px";
imgObj.style.backgroundColor = "#f0f0f0";
}
</script>
</head>
<body >
<img id="img1" src="/upload/course/000/000/009/580af7f52278b486.jpg" />
</body>
</html> 
