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

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

WBOY

Libérer： 2016-05-16 15:23:17

original

1281 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

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