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

私は外部ファイル内のすべてのCSSやJSの値をseparteしようと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を起動します。したがって、ブラウザでまだレンダリングされていないため、選択するモーダルはありません。

ここには3つの解決策があります。

1.簡単な解決策は、単にbodyタグを閉じる前に、外部の償還請求をロードするスクリプトタグを、再配置することである
外部スクリプトを再配置します。

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

私のコードをあなたのものに置き換えますが、うまくいきません –

あなたはどのような解決策を試しましたか？（私は3つの可能な解決法を提供していることは明らかではないかもしれません） –

第2の解決策 –

はJS使用して外部CSSの値を変更

答えて

関連する問題