如何使用JavaScript操作HTML元素

How to manipulate HTML element with JavaScript

本文关键字：HTML 元素 操作 JavaScript 何使用      更新时间：2023-09-26

我正在尝试用鼠标缩放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)";
};
});

但由于某种原因，它不起作用。如果有人能告诉我为什么，我将不胜感激。

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

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

SNIPET

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

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

代替

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

尝试（不带"#"）

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

除了答案：

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

相关文章：