如何使用JavaScript处理HTML元素

我想在鼠标上缩放HTML图像。我在javascript中这样做的原因是因为我想通过将鼠标悬停在多个元素上来以不同的方式处理多个元素。这里是我的javascript（我试图操纵元素被称为“logoF”）：如何使用JavaScript处理HTML元素

$(document).ready(function() { 

var logoF = document.getElementById("#logoF"); 

logoF.onmouseover=function(){ 
    logoF.style.webkitTransform= "scale(0.8)"; 
    logoF.style.msTransform= "scale(0.8)"; 
    logoF.style.transform= "scale(0.8)"; 
}; 

});

但由于某种原因它不工作。如果有人能告诉我为什么会非常感激。

来源

2015-12-16 Zenith

你的选择是错误的，这可能是问题。

而不是

var logoF = document.getElementById("#logoF");

尝试（不带 “＃”）

var logoF = document.getElementById("logoF");

来源

2015-12-16 16:07:33

您必须删除#内var logoF = document.getElementById("#logoF");。这是正确的方式 -

var logoF = document.getElementById("logoF");

代码片段

$(document).ready(function() { 
 

 
    var logoF = document.getElementById("logoF"); 
 

 
    logoF.onmouseover = function() { 
 
    logoF.style.webkitTransform = "scale(0.8)"; 
 
    logoF.style.msTransform = "scale(0.8)"; 
 
    logoF.style.transform = "scale(0.8)"; 
 
    }; 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img src="https://pbs.twimg.com/profile_images/616542814319415296/McCTpH_E.jpg" id="logoF" />

来源

2015-12-16 16:07:36

谢谢！删除了“＃”，并在出错的地方导入脚本。感谢您的帮助和不错的哈哈！ – Zenith

除了答案：

$(document).on('mouseover mouseout', '#logo', function(){ 
 
    $('img').toggleClass('scaled') 
 
});

img { 
 
    max-width: 100%; 
 
    transition: 1s; 
 
} 
 
#logo { 
 
    width: 300px; 
 
    overflow: hidden; 
 
} 
 
.scaled { 
 
    transform: scale(2); 
 
    transition: 1s; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="logo"> 
 
<img src="http://www.2fons.ru/pic/201406/1920x1080/2fons.ru-21593.jpg"> 
 
</div>

来源

2015-12-16 16:10:50 NeedHate

如何使用JavaScript处理HTML元素

回答

相关问题