CSS和JavaScript如何一起工作？

我在javascript的幫助下動態添加了CSS樣式，使得隨機移動了一些氣泡。
這裏我使用了一個addElement方法來添加多個div塊。現在，當我在body內創建一個新元素並嘗試使用不帶javaScript的css在<style>元素下進行樣式設置時，它不起作用。CSS和JavaScript如何一起工作？

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <style> 
 
    .box { 
 
     position: absolute; 
 
     width: 100px; 
 
     height: 100px; 
 
\t border-radius: 100px; 
 
\t box-shadow:0 0 10px #0000e6; 
 
     -webkit-transition: 5s linear; 
 
    } 
 
    .box:hover { 
 
     width: 100px; 
 
     height: 100px; 
 
     border-radius: 100px; 
 
\t background-color:red; 
 
     
 
    } 
 
    } 
 
    .next 
 
    { 
 
    position: absolute; 
 
     border-radius: 10px; 
 
     width: 40px; 
 
     height: 20px; 
 
     box-shadow:0 0 10px #0000e6; 
 
\t left:500px; 
 
\t top:400px; 
 
\t color:white; 
 
    } 
 
    </style> 
 
    
 
</head> 
 

 
<body bgcolor="black" onload="bbbl()"> 
 

 
<h2 class="next">Next</h2> 
 

 
<script> 
 

 

 

 
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 = "black"; 
 
    el.style.opacity = "0.9"; 
 
    document.body.insertBefore(el, document.body.childNodes[0]) 
 

 
    moveRandom() 
 
    } 
 
} \t 
 

 
bbbl() 
 
setInterval(moveRandom, 5000) 
 

 
</script> 
 

 
</body> 
 

 
</html>

來源

2016-09-18 Utsav Prasad

你有一個流浪'}'你的風格 - 只是.next'以上' - 刪除它，它工作得很好 –

哦！......我錯過那感謝了很多!! –

在每行後面添加分號.... JavaScript不像Swift，分號終止該行。一些瀏覽器可能很難解釋沒有分號的代碼。 – SPlatten

<!DOCTYPE html> 
<html> 

<head> 
    <style> 
    .box { 
     position: absolute; 
     width: 100px; 
     height: 100px; 
     border-radius: 100px; 
     box-shadow:0 0 10px #0000e6; 
     -webkit-transition: 5s linear; 
    } 
    .box:hover { 
     width: 100px; 
     height: 100px; 
     border-radius: 100px; 
     background-color:red; 

    } 
    } <<<<<<<<<<<<< delete 
    .next 
    { 
    position: absolute; 
     border-radius: 10px; 
     width: 40px; 
     height: 20px; 
     box-shadow:0 0 10px #0000e6; 
     left:500px; 
     top:400px; 
     color:white; 
    } 
    </style> 

</head> 

<body bgcolor="black" onload="bbbl()"> 

<h2 class="next">Next</h2> 

<script> 



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 = "black"; 
    el.style.opacity = "0.9"; 
    document.body.insertBefore(el, document.body.childNodes[0]) 

    moveRandom() 
    } 
} 

bbbl() 
setInterval(moveRandom, 5000) 

</script> 

</body> 

</html>

來源

2016-09-18 05:44:39

你修好了什麼？ – 2016-09-25 18:23:46

CSS和JavaScript如何一起工作？

回答

相關問題