Maison > Article > interface Web > Comment définir dynamiquement le style d'un div avec des compétences JavaScript_javascript

Comment définir dynamiquement le style d'un div avec des compétences JavaScript_javascript

WBOYoriginal: 2016-05-16 15:23:171257parcourir

Parfois, il est nécessaire de définir dynamiquement le style d'un div selon les besoins. Bien sûr, pour les développeurs javascript expérimentés, tout cela est si simple, mais pour les débutants ou les développeurs sans expérience pertinente, ce n'est peut-être ni grand ni petit. difficulté. Présentons brièvement comment obtenir cet effet à travers un exemple.

L'exemple de code est le suivant :

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<head>
<title>动态设置div的样式</title>
<style type="text/css">
div{
 width:50px;
 height:50px;
 background:red;
 margin-top:10px;
}
.bg{
 background-color:blue;
}
</style>
<script type="text/javascript">
window.onload=function(){
 var firstDiv=document.getElementById("firstDiv");
 var secondDiv=document.getElementById("secondDiv");
 var first=document.getElementById("first");
 var second=document.getElementById("second");
 first.onclick=function(){
   firstDiv.style.backgroundColor="green";
 }
 second.onclick=function(){
   secondDiv.className="bg";
 }
}
</script>
</head>
<body>
<div id="firstDiv"></div>
<div id="secondDiv"></div>
<input type="button" value="使用style方式" id="first" />
<input type="button" value="使用className方式" id="second" />
</body>
</html>

Le code ci-dessus répond à nos exigences, mais utilise deux méthodes, l'une est la méthode style et l'autre est la méthode className.

Remarque spéciale :

1. Lors de l'utilisation du style, les attributs de mots tels que background-color doivent être écrits en casse chameau (la première lettre du deuxième mot est en majuscule) et écrits sous la forme backgroundColo.

2. Lors de l'utilisation de className, la valeur de l'attribut est le nom du style de classe, mais le point (.) ne peut pas être ajouté devant.

PS : Comment modifier dynamiquement les attributs div à l'aide de JavaScript

L'exemple de cet article décrit la méthode d'implémentation permettant de modifier dynamiquement les attributs div en JavaScript. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Ici, vous pouvez modifier dynamiquement les attributs div, les styles, etc. via JS

<script type="text/javascript">
 var oBox = document.getElementById('box');
 var oDiv = document.getElementById('div1');
 var aInput = document.getElementsByTagName('input');
 var aAttr = ['width', 'height', 'backgroundColor', 'display', 'display'];
 var aValue = ['200px', '200px', 'red', 'none', 'block'];
 for(var len=aInput.length,i=0;i<len;i++){
  aInput[i].index = i; //索引
  aInput[i].onclick = function(){
   //重置按钮,cssText清空DIV属性
   if(this.index == aInput.length - 1)oDiv.style.cssText = "";
   //设置DIV属性
   property(oDiv, aAttr[this.index], aValue[this.index]);
  };
 }
 //控制DIV属性
 function property(obj, attr, value){
  obj.style[attr] = value;
 }
</script>

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：JavaScript natif implémente les compétences layout_javascript du flux en cascadeArticle suivant：JavaScript natif implémente les compétences layout_javascript du flux en cascade

Articles Liés

Voir plus