如何使用JavaScript操作HTML元素

Question

我试图在鼠标上方缩放HTML图像。 我在javascript中执行此操作的原因是，我想通过将鼠标悬停在一个元素上来以不同的方式操作多个元素。 这是我的javascript（我尝试操作的元素称为“ 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)";
};

});

但由于某种原因，它无法正常工作。 如果有人能告诉我原因，将不胜感激。

Answer 1

你必须删除#里面var logoF = document.getElementById("#logoF"); 。 这是正确的方法-

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

SNIPPET

 $(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" /> 

Answer 2

您的选择器错误，可能是问题所在。

代替

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

尝试（不带“＃”）

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

Answer 3

除了答案：

 $(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>