javascript - 如何使用 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");

片段

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