呼叫，當訪客裏面的div

點擊像這個例子執行JavaScript網址點擊JavaScript網址：

<html> 
 
<head> 
 
<meta charset="UTF-8"> 
 
<style> 
 
.youtube .play,.youtube img{cursor:pointer;position:absolute} 
 
.youtube{position:relative;padding-bottom:56.23%;height:0;overflow:hidden;max-width:100%;background:#000;margin:5px} 
 
.youtube embed,.youtube iframe,.youtube object{position:absolute;top:0;left:0;width:100%;height:100%;z-index:100;background:0 0} 
 
.youtube img{bottom:0;display:block;left:0;margin:auto;max-width:100%;width:100%;right:0;top:0;border:none;height:auto;-webkit-transition:.4s all;-moz-transition:.4s all;transition:.4s all} 
 
.youtube img:hover{-webkit-filter:brightness(75%)} 
 
.youtube .play{height:72px;width:72px;left:50%;top:50%;margin-left:-36px;margin-top:-36px;background:url(//i.imgur.com/TxzC70f.png) no-repeat} 
 
</style> 
 
</head> 
 

 
<body> 
 

 
<div class="youtube" data-id="YQHsXMglC9A"></div> 
 
    
 
</body> 
 

 
<script> 
 
/* Light YouTube Embeds by @labnol */ 
 
/* Web: http://labnol.org/?p=27941 */ 
 

 
    document.addEventListener("DOMContentLoaded", 
 
     function() { 
 
      var div, n, 
 
       v = document.getElementsByClassName("youtube"); 
 
      for (n = 0; n < v.length; n++) { 
 
       div = document.createElement("div"); 
 
       div.setAttribute("data-id", v[n].dataset.id); 
 
       div.innerHTML = labnolThumb(v[n].dataset.id); 
 
       div.onclick = labnolIframe; 
 
       v[n].appendChild(div); 
 
      } 
 
     }); 
 

 
    function labnolThumb(id) { 
 
     var thumb = '<img src="https://i.ytimg.com/vi/ID/hqdefault.jpg">', 
 
      play = '<div class="play"></div>'; 
 
     return thumb.replace("ID", id) + play; 
 
    } 
 

 
    function labnolIframe() { 
 
     var iframe = document.createElement("script"); 
 
     iframe.setAttribute("src", "https://www.youtube.com/embed/" + this.dataset.id + "?autoplay=1"); 
 
     iframe.setAttribute("frameborder", "0"); 
 
     iframe.setAttribute("allowfullscreen", "1"); 
 
     this.parentNode.replaceChild(iframe, this); 
 
    } 
 

 
</script> 
 

 
</html>

像此圖片

image 。

HTML代碼+ JavaScript的：

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
</head> 
<body> 

<div id="a" style="background-color:#999; height:90px; width:250px;" >Click here</div> 

</body> 
</html>

的Javascript：

<script type="text/javascript"> 
document.write("Hello World!"); 
</script>

或者：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

如何運行java當訪客點擊內部div時的腳本網址？

來源

2017-05-04 moon93

你可能意思是運行一個javascript函數，對吧？那麼，當有人點擊div時，它會執行一個操作？ –

@PedroChiiip是的，對於頁面速度:) – moon93

我相信你想運行一個JavaScript函數，當你的div被點擊。您只需要將onclick()事件添加到您的<div>標記並聲明該功能。所以，你的股利將是這樣的：

<div id="a" style="background-color:#999; height:90px; width:250px;" onclick="writeFunction();">Click here</div>

和作用，具有相同的名稱，你對你的onclick聲明：

<script type="text/javascript"> 

function writeFunction(){ 

document.write("Hello World!"); 

} 
</script>

正如你所使用的文件撰寫，我已經留了，它不會顯示您在圖片中顯示的結果，並且您的div正在消失。爲了做到如你想象的，你必須添加一個<p>元件，其initally空白：

<p id='text'></p>

，然後問你的函數來設置它的文字，像這樣：

document.getElementById('text').innerHTML = "Hello World!";

你可以點擊此處瞭解詳情：https://www.w3schools.com/jsref/event_onclick.asp

來源

2017-05-04 17:25:35

非常感謝你^^ – moon93

@ moon93不客氣！ –

喜歡的東西，這將做到這一點...

function clickMe() { 
 
\t alert("You clicked me!") 
 
}

<!doctype html> 
 
<html> 
 
<head> 
 
<meta charset="utf-8"> 
 
</head> 
 
<body> 
 

 
<div id="a" style="background-color:#999; height:90px; width:250px;" onclick="clickMe()" >Click here</a></div> 
 

 
</body> 
 
</html>

來源

2017-05-04 17:26:32 Gi1ber7

非常感謝:) – moon93

非常歡迎。 ;） – Gi1ber7

首先，而不是試圖運行腳本，你應該嘗試運行的功能。例如

function test(){ 
 
    document.write("Hello World!") 
 
} 
 

 
function test2(){ 
 
    document.getElementById("output").innerHTML = "Hello World!" 
 
}

<div onclick="test()"> 
 
    <p> Click me </p> 
 
</div> 
 
<div onclick="test2()"> 
 
    <p> Click me (won't remove screen) </p> 
 
</div> 
 
<div id="output"> 
 

 
</div>

點擊第一個div將調用測試（）函數。然而，這個功能會覆蓋屏幕上的所有內容，這不是你想要的。

第二種方法沒有這樣做，而是將第三個div的內容設置爲「Hello World！」。

來源

2017-05-04 17:26:46

感謝^^不錯的代碼 – moon93

呼叫，當訪客裏面的div

回答

相關問題