suchen

Heim >Web-Frontend >js-Tutorial >So legen Sie den Stil eines Div mit JavaScript_Javascript-Kenntnissen dynamisch fest

So legen Sie den Stil eines Div mit JavaScript_Javascript-Kenntnissen dynamisch fest

WBOY
WBOYOriginal
2016-05-16 15:23:171269Durchsuche

Manchmal ist es notwendig, den Stil eines Div nach Bedarf dynamisch festzulegen. Für erfahrene Javascript-Entwickler ist das natürlich alles so einfach, aber für Anfänger oder Entwickler ohne entsprechende Erfahrung ist es möglicherweise nicht groß oder klein Schwierigkeitsgrad: Lassen Sie uns anhand eines Beispiels kurz vorstellen, wie dieser Effekt erzielt werden kann.

Das Codebeispiel lautet wie folgt:

<!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>

Der obige Code erfüllt unsere Anforderungen, verwendet jedoch zwei Methoden, eine ist die Style-Methode und die andere die ClassName-Methode.

Besonderer Hinweis:

1. Bei der Verwendung von „Stil“ sollten Wortattribute wie „Hintergrundfarbe“ in Großbuchstaben geschrieben werden (der erste Buchstabe des zweiten Wortes wird großgeschrieben) und in der Form „Hintergrundfarbe“ geschrieben.

2. Bei Verwendung von className ist der Attributwert der Klassenstilname, der Punkt (.) kann jedoch nicht vorangestellt werden.

PS: So ändern Sie div-Attribute dynamisch mit JavaScript

Das Beispiel in diesem Artikel beschreibt die Implementierungsmethode zum dynamischen Ändern von div-Attributen in JavaScript. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Hier können Sie Div-Attribute, Stile usw. dynamisch über JS ändern

<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>

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Natives JavaScript implementiert Wasserfall-Flow-Layout_Javascript-FähigkeitenNächster Artikel：Natives JavaScript implementiert Wasserfall-Flow-Layout_Javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen