使用JS修改外部CSS值

-1

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
/* The Modal (background) */ 
 
.modal { 
 
    display: none; /* Hidden by default */ 
 
    position: fixed; /* Stay in place */ 
 
    z-index: 1; /* Sit on top */ 
 
    padding-top: 100px; /* Location of the box */ 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; /* Full width */ 
 
    height: 100%; /* Full height */ 
 
    overflow: auto; /* Enable scroll if needed */ 
 
    background-color: rgb(0,0,0); /* Fallback color */ 
 
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ 
 
} 
 

 
/* Modal Content */ 
 
.modal-content { 
 
    background-color: #fefefe; 
 
    margin: auto; 
 
    padding: 20px; 
 
    border: 1px solid #888; 
 
    width: 80%; 
 
} 
 

 
/* The Close Button */ 
 
.close { 
 
    color: #aaaaaa; 
 
    float: right; 
 
    font-size: 28px; 
 
    font-weight: bold; 
 
} 
 

 
.close:hover, 
 
.close:focus { 
 
    color: #000; 
 
    text-decoration: none; 
 
    cursor: pointer; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 
<h2>Modal Example</h2> 
 

 
<!-- Trigger/Open The Modal --> 
 
<button id="myBtn">Open Modal</button> 
 

 
<!-- The Modal --> 
 
<div id="myModal" class="modal"> 
 

 
    <!-- Modal content --> 
 
    <div class="modal-content"> 
 
    <span class="close">&times;</span> 
 
    <p>Some text in the Modal..</p> 
 
    </div> 
 

 
</div> 
 

 
<script> 
 
// Get the modal 
 
var modal = document.getElementById('myModal'); 
 

 
// Get the button that opens the modal 
 
var btn = document.getElementById("myBtn"); 
 

 
// Get the <span> element that closes the modal 
 
var span = document.getElementsByClassName("close")[0]; 
 

 
// When the user clicks the button, open the modal 
 
btn.onclick = function() { 
 
    modal.style.display = "block"; 
 
} 
 

 
// When the user clicks on <span> (x), close the modal 
 
span.onclick = function() { 
 
    modal.style.display = "none"; 
 
} 
 

 
// When the user clicks anywhere outside of the modal, close it 
 
window.onclick = function(event) { 
 
    if (event.target == modal) { 
 
     modal.style.display = "none"; 
 
    } 
 
} 
 
</script> 
 

 
</body> 
 
</html>

我嘗試separte在外部文件中的所有CSS和JS值，並將其稱爲對HTML，但它說

model.js:15 Uncaught ReferenceError: modal is not defined at HTMLButtonElement.document.getElementById.onclick (model.js:15)

如何解決它

來源

2017-02-06 Chirag Gojaria

您需要向我們展示** **不工作的代碼，而不是代碼。 – Quentin

請嘗試重新格式化您對問題的描述。 –

這很可能是因爲您在頭部添加了外部JS文件。這會在DOM準備加載之前觸發JS。所以沒有模式可供選擇，因爲它尚未被瀏覽器渲染。

以下是三種可能的解決方案。

1.移居你的外部腳本
一個簡單的解決辦法就是在關閉body標籤之前搬遷script標籤，它加載外部追索權，對。

 // Your HTML markup 
    <script src="yourfile.js" type="text/javascript"></script> 
    </body> 
</html>

2.在window.onload
包裝你的代碼放到一個函數，並與window.onload火了。
window.onload等待所有從樣式表到圖像的加載。所以這個缺點是當像圖像這樣的東西仍在加載時，模式不會觸發，而大部分頁面看起來都不錯。
https://jsfiddle.net/PaulvdDool/e6zqp0p0/

3. jQuery的解決方案
添加jQuery和包裹文件準備功能的代碼。

$(document).ready(function() { 
    // Your code here 
});

來源

2017-02-06 13:41:40

我將您的代碼替換爲您的代碼，但無法使用 –

您嘗試了什麼解決方案？（我可能不清楚我提供了三種可能的解決方案） –

第二個解決方案 –

使用JS修改外部CSS值

回答

相關問題