如何通過多個javascript DOM應用樣式 <div> 塊
[英]how can i apply style through javascript DOM in multiple <div> blocks
問題描述
<!DOCKTYPE html> <html> <head> <style> div { position:absolute; width:100px; height:100px; -webkit-transition: 1s ease 0s; } div:hover { width:100px; height:100px; border-radius:100px; -webkit-transform:matrix3d(0.359127, -0.469472, 0.806613, 0, 0.190951, 0.882948, 0.428884, 0, -0.913545, 0, 0.406737, 0, 0, 0, 0, 1); } } </style> </head> <body bgcolor="black" onload="bbbl()"> <div id="a"></div> <div id="b"></div> <div id="c"></div> <div id="d"></div> <div id="e"></div> <div id="f"></div> <div id="g"></div> <div id="h"></div> <div id="i"></div> <div id="j"></div> <div id="k"></div> <div id="l"></div> <div id="m"></div> <div id="n"></div> <div id="o"></div> <div id="p"></div> <div id="q"></div> <div id="r"></div> <div id=""></div> <div id="t"></div> <div id="u"></div> <div id="v"></div> <div id="w"></div> <div id="x"></div> <div id="y"></div> <div id="z"></div> <div id="1"></div> <div id="ba"></div> <div id="ca"></div> <div id="da"></div> <div id="ea"></div> <div id="fa"></div> <div id="ga"></div> <div id="ha"></div> <div id="ia"></div> <div id="ja"></div> <div id="ka"></div> <div id="la"></div> <div id="ma"></div> <div id="na"></div> <div id="oa"></div> <div id="pa"></div> <div id="qa"></div> <div id="ra"></div> <div id="sa"></div> <div id="ta"></div> <div id="ua"></div> <div id="va"></div> <div id="wa"></div> <div id="xa"></div> <div id="ya"></div> <div id="za"></div> <script> var color = ["orange", "blue", "pink", "red", "green", "blue", "pink", "red", "green", "blue", "pink", "red", "white", "blue", "pink", "red", "green", "blue", "pink", "red", "green", "blue", "pink", "red", "green","navy","orange", "white", "pink", "red", "green", "blue", "pink", "red", "green", "blue", "pink", "red", "green", "blue", "pink", "red", "green", "blue", "pink", "red", "green", "blue", "white", "red"]; var id = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z","1", "ba", "ca", "da", "ea", "fa", "ga", "ha", "ia", "ja", "ka", "la", "ma", "oa", "pa", "qa", "ra", "sa", "ta", "ua", "va", "wa", "xa", "ya", "za"]; var ran3=Math.floor(Math.random() * 1200); var ran4=Math.floor(Math.random() * 500); function bbbl() { for(i=0;i<=51;i++) { var ran=Math.floor(Math.random() * 1200); var ran1=Math.floor(Math.random() * 500); document.getElementById(id[i]).style.backgroundColor=color[i]; document.getElementById(id[i]).style.left=ran+'px'; document.getElementById(id[i]).style.top=ran1+'px'; document.getElementById(id[i]).style.opacity="0.3"; } } </script> </body> </html>
我想在我的網頁內隨機創建52個<div>塊。 我沒有得到想要的輸出。 HTML DOM無法正常工作。 僅20個<div>塊有效。
在這里，我使用隨機函數為每個單獨的<div>設置不同的位置。 所需的輸出應該是在不同位置的52個不同顏色的塊。 但是結果是不同的。 僅輸出塊。
我可以用其他方式嗎？
4 個解決方案
解決方案1
2 2016-09-16 10:37:32
你有幾個問題。 首先，您的HTML缺少#s元素。 數組中也只有50個元素，因此循環到51包含在內）會導致超出范圍的錯誤。 您可以改為循環到id.length 。
更好的方法是選擇所有div元素（按標記或類）並直接遍歷它們，而不必維護所有id屬性的單獨列表。 嘗試這個：
var color = ["orange", "blue", "pink", "red", "green", "blue", "pink", "red", "green", "blue", "pink", "red", "white", "blue", "pink", "red", "green", "blue", "pink", "red", "green", "blue", "pink", "red", "green", "navy", "orange", "white", "pink", "red", "green", "blue", "pink", "red", "green", "blue", "pink", "red", "green", "blue", "pink", "red", "green", "blue", "pink", "red", "green", "blue", "white", "red"]; function bbbl() { var els = document.querySelectorAll('div'); els.forEach(function(el, i) { var ran = Math.floor(Math.random() * 1200); var ran1 = Math.floor(Math.random() * 500); el.style.backgroundColor = color[i]; el.style.left = ran + 'px'; el.style.top = ran1 + 'px'; el.style.opacity = "0.3"; }); } bbbl();
div { position: absolute; width: 100px; height: 100px; -webkit-transition: 1s ease 0s; } div:hover { width: 100px; height: 100px; border-radius: 100px; -webkit-transform: matrix3d(0.359127, -0.469472, 0.806613, 0, 0.190951, 0.882948, 0.428884, 0, -0.913545, 0, 0.406737, 0, 0, 0, 0, 1); } body { background-color: black; }
<div id="a"></div> <div id="b"></div> <div id="c"></div> <div id="d"></div> <div id="e"></div> <div id="f"></div> <div id="g"></div> <div id="h"></div> <div id="i"></div> <div id="j"></div> <div id="k"></div> <div id="l"></div> <div id="m"></div> <div id="n"></div> <div id="o"></div> <div id="p"></div> <div id="q"></div> <div id="r"></div> <div id="s"></div> <div id="t"></div> <div id="u"></div> <div id="v"></div> <div id="w"></div> <div id="x"></div> <div id="y"></div> <div id="z"></div> <div id="1"></div> <div id="ba"></div> <div id="ca"></div> <div id="da"></div> <div id="ea"></div> <div id="fa"></div> <div id="ga"></div> <div id="ha"></div> <div id="ia"></div> <div id="ja"></div> <div id="ka"></div> <div id="la"></div> <div id="ma"></div> <div id="na"></div> <div id="oa"></div> <div id="pa"></div> <div id="qa"></div> <div id="ra"></div> <div id="sa"></div> <div id="ta"></div> <div id="ua"></div> <div id="va"></div> <div id="wa"></div> <div id="xa"></div> <div id="ya"></div> <div id="za"></div>
解決方案2
0 2016-09-16 10:47:16
DOM沒問題。 您的代碼中有問題。
您的div的ID為空
您有一個ID為數字（1）的div。 ID不能是數字。
您缺少數組（n）和（na）。
var color = ["orange", "blue", "pink", "red", "green", "blue", "pink", "red", "green", "blue", "pink", "red", "white", "blue", "pink", "red", "green", "blue", "pink", "red", "green", "blue", "pink", "red", "green","navy","orange", "white", "pink", "red", "green", "blue", "pink", "red", "green", "blue", "pink", "red", "green", "blue", "pink", "red", "green", "blue", "pink", "red", "green", "blue", "white", "red"]; var id = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z","aa", "ba", "ca", "da", "ea", "fa", "ga", "ha", "ia", "ja", "ka", "la", "ma", "oa", "na", "pa", "qa", "ra", "sa", "ta", "ua", "va", "wa", "xa", "ya", "za"]; var ran3=Math.floor(Math.random() * 1200); var ran4=Math.floor(Math.random() * 500); function bbbl() { for(i=0; i<=51; i++) { var ran=Math.floor(Math.random() * 1200); var ran1=Math.floor(Math.random() * 500); var block = document.getElementById(id[i]); block.style.backgroundColor=color[i]; block.style.left=ran+'px'; block.style.top=ran1+'px'; block.style.opacity="0.3"; } }
div { position:absolute; width:100px; height:100px; -webkit-transition: 1s ease 0s; } div:hover { width:100px; height:100px; border-radius:100px; -webkit-transform:matrix3d(0.359127, -0.469472, 0.806613, 0, 0.190951, 0.882948, 0.428884, 0, -0.913545, 0, 0.406737, 0, 0, 0, 0, 1); }
<body bgcolor="black" onload="bbbl()"> <div id="a"></div> <div id="b"></div> <div id="c"></div> <div id="d"></div> <div id="e"></div> <div id="f"></div> <div id="g"></div> <div id="h"></div> <div id="i"></div> <div id="j"></div> <div id="k"></div> <div id="l"></div> <div id="m"></div> <div id="n"></div> <div id="o"></div> <div id="p"></div> <div id="q"></div> <div id="r"></div> <div id="s"></div> <div id="t"></div> <div id="u"></div> <div id="v"></div> <div id="w"></div> <div id="x"></div> <div id="y"></div> <div id="z"></div> <div id="aa"></div> <div id="ba"></div> <div id="ca"></div> <div id="da"></div> <div id="ea"></div> <div id="fa"></div> <div id="ga"></div> <div id="ha"></div> <div id="ia"></div> <div id="ja"></div> <div id="ka"></div> <div id="la"></div> <div id="ma"></div> <div id="na"></div> <div id="oa"></div> <div id="pa"></div> <div id="qa"></div> <div id="ra"></div> <div id="sa"></div> <div id="ta"></div> <div id="ua"></div> <div id="va"></div> <div id="wa"></div> <div id="xa"></div> <div id="ya"></div> <div id="za"></div>
解決方案3
0 已采納 2016-09-16 10:50:16
這應該工作.....我使代碼真的非常簡單....
編輯：添加了隨機運動。
var color = ["orange", "blue", "pink", "red", "green", "blue", "pink", "red", "green", "blue", "pink", "red", "white", "blue", "pink", "red", "green", "blue", "pink", "red", "green", "blue", "pink", "red", "green", "navy", "orange", "white", "pink", "red", "green", "blue", "pink", "red", "green", "blue", "pink", "red", "green", "blue", "pink", "red", "green", "blue", "pink", "red", "green", "blue", "white", "red"]; function getRandom(max) { return Math.random() * (max - 0) + 0; } function moveRandom(){ var box = document.getElementsByClassName('box') for (var i = 0; i < box.length; i++) { box[i].style.left = (getRandom(window.innerWidth) -100) + 'px'; box[i].style.top = (getRandom(window.innerHeight) -100) + 'px'; } } function bbbl() { for (i = 0; i <= 51; i++) { var el = document.createElement('div') el.classList.add('box') el.style.backgroundColor = color[i]; el.style.opacity = "0.3"; document.body.insertBefore(el, document.body.childNodes[0]) moveRandom() } } bbbl() setInterval(moveRandom, 5000)
<!DOCKTYPE html> <html> <head> <style> .box { position: absolute; width: 100px; height: 100px; -webkit-transition: 1s ease 0s; } .box:hover { width: 100px; height: 100px; border-radius: 100px; -webkit-transform: matrix3d(0.359127, -0.469472, 0.806613, 0, 0.190951, 0.882948, 0.428884, 0, -0.913545, 0, 0.406737, 0, 0, 0, 0, 1); } } </style> </head> <body bgcolor="black" onload="bbbl()"> </body> </html>
解決方案4
0 2016-09-16 12:05:05
//--try using class instead of id block.
//example
.mydiv
{
position:absolute;
width:100px;
height:100px;
-webkit-transition: 1s ease 0s;
}
.mydiv:hover
{
width:100px;
height:100px;
border-radius:100px;
-webkit-transform:matrix3d(0.359127, -0.469472, 0.806613, 0, 0.190951, 0.882948, 0.428884, 0, -0.913545, 0, 0.406737, 0, 0, 0, 0, 1);
}
我怎樣才能使這個 javascript 適用於 jinja 返回的每個 div
[英]How can I make this javascript apply on every div returned by jinja
如何使用javascript打開div？ 鼠標懸停和鼠標懸停樣式
[英]How can I open a div with javascript ? Mouseover & Mouseout style
如何跟蹤修改DOM中div的內聯樣式的JavaScript？
[英]How to track down JavaScript that is modifying the inline style of a div in the DOM?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
如何將 jQuery 插件應用於 JavaScript DOM 元素？
如何將一些樣式應用於 JavaScript 的“節點”對象
將樣式應用於 DOM 中具有特定 class 的第一個 div
無法通過Javascript查看DOM節點的樣式可見性
我怎樣才能使這個 javascript 適用於 jinja 返回的每個 div
如何使用javascript dom編寫多個div
如何使用javascript打開div？ 鼠標懸停和鼠標懸停樣式
如何使用 JavaScript 創建和設置 div 樣式？
如何跟蹤修改DOM中div的內聯樣式的JavaScript？
如何將javascript函數應用於多個div類？
相關標簽