使用javascript和jquery更改div的樣式
[英]Change the style of a div with javascript and jquery
問題描述
在我的資料中，我有：在樣式部分：
<head>
<style>
.grayableDiv{background-color:transparent}
</style>
</head>
<script>
function DoGrayEffectIn()
{
$('.grayableDiv').css('background-color', 'Gray');
}
function DoGrayEffectOut()
{
$('.grayableDiv').css('background-color', 'Transparent');
}
</script>
<div class="grayableDiv" onmouseover ="DoGrayEffectIn" onmouseout="DoGrayEffectOut">
但是，將鼠標移到div上時我看不到效果。 我究竟做錯了什么。 是否可以通過這種方式混合使用jquery和javascript？
3 個解決方案
解決方案1
2 已采納 2018-05-12 16:49:44
您需要在事件處理程序中添加括號() ，以便調用其功能。
應該是onmouseover ="DoGrayEffectIn()" ，而不是onmouseover ="DoGrayEffectIn"
堆棧片段
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <head> <style> .grayableDiv { background-color: transparent } </style> </head> <script> function DoGrayEffectIn() { $('.grayableDiv').css('background-color', 'Gray'); } function DoGrayEffectOut() { $('.grayableDiv').css('background-color', 'Transparent'); } </script> <div class="grayableDiv" onmouseover="DoGrayEffectIn()" onmouseout="DoGrayEffectOut()">div</div>
將JavaScript附加到網站前端的一種更好的做法是將其與標記（通常稱為“ 不引人注意的javascript”）分開。
堆棧片段
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <head> <style> .grayableDiv { background-color: transparent } </style> </head> <script> $(document).ready(function() { $('.grayableDiv') .mouseover(function() { $(this).css('background-color', 'Gray'); }).mouseout(function() { $(this).css('background-color', 'Transparent'); }); }); </script> <div class="grayableDiv">div</div>
解決方案2
1 2018-05-12 16:50:27
您沒有使用（）調用該函數
<div class="grayableDiv" onmouseover ="DoGrayEffectIn()" onmouseout="DoGrayEffectOut()">
解決方案3
1 2018-05-12 17:12:15
無需將JavaScript與HTML混合的另一種更清潔的方法
<script>
$(document).ready(function(){
$(".grayableDiv").mouseover(function(){
$(".grayableDiv").css("background-color", "gray");
});
$(".grayableDiv").mouseout(function(){
$(".grayableDiv").css("background-color", "transparent");
});
});
</script>
Javascript 改變Div樣式
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.