Javascript W3S上的JSHTMLDOM事件_Javascript

Javascript W3S上的JSHTMLDOM事件

javascript

Javascript W3S上的JSHTMLDOM事件,javascript,Javascript,我试图在w3schools上学习javascript，在其中一个示例中，它有以下代码： <html> <body> <div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background- color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div> <script> f

我试图在w3schools上学习javascript，在其中一个示例中，它有以下代码：

<html>
<body>

<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-    color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>

<script>
function mOver(obj)
{
obj.innerHTML="Thank You"
}

function mOut(obj)
{
obj.innerHTML="Mouse Over Me"
}
</script>

</body>
</html>


老鼠在我身上
功能移动器（obj）
{
obj.innerHTML=“谢谢”
}
功能移动（obj）
{
obj.innerHTML=“将鼠标放在我身上”
}

当你把鼠标放在积木上时，它会根据需要说谢谢。然而，如果我自己编码的话，我会很恼火，因为感谢没有放在盒子的中央。我玩弄过它，但当你鼠标滑过时，我不知道如何将感谢放在盒子的中心。有可能吗？

使用CSS:

文本对齐：居中。我还将JavaScript与HTML分开。让我们调用您的第一个页面index.html

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <title>Looks like your first page</title>
    <style type='text/css'>
      @import 'index.css;
    </style>
  </head>
<body class='njs'>
  <div id='whatever'>Mouse Over Me</div>
  <script type='text/javascript' src='common.js'></script>
  <script type='text/javascript' src='index.js'></script>
</body>
</html>

现在，让我们创建一个通用JavaScript页面以供重用-common.js

//<![CDATA[
var doc = document, bod = doc.body, IE = parseFloat(navigator.appVersion.split('MSIE')[1]);
bod.className = 'js';
function gteIE(version, className){
  if(IE >= version){
    bod.className = className;
  }
}
function E(e){
  return doc.getElementById(e);
}
//]]>

//<![CDATA[
var yourDiv = E('whatever');
yourDiv.onmouseover = function(){
  this.innerHTML = 'It Worked';
}
yourDiv.onmouseout = function(){
  this.innerHTML = 'Mouse Over Me';
}
//]]>

使用jquery：

$（文档）.ready（函数（）{
var TargID=document.getElementById（'bar'））
$（“.foo”）.hover（函数（）{
targetid.innerHTML=“谢谢”
$（“div”）.css（“背景色”、“红色”）；
$（“.foo”）.css（“文本对齐”、“居中”）；
});
$（“.foo”）.mouseout（函数（）{
targetid.innerHTML=“将鼠标放在我身上”
$（“div”）.css（“背景色”和“D94A38”）；
$（“.foo”）.css（“文本对齐”，“左”）；
});
});
老鼠在我身上
这真的是用来学习任何东西的。奇怪的问题-你已经清楚地看到它完成了，但问它是可能的。。。很明显，答案是肯定的，但在一个非常有用的问题中“是否可能”。请提供您的代码，也许还有一个链接，指向您从他们的教程中获得此信息的地方。我们很乐意帮助您，但我们不需要知道您做了什么来帮助您修复它。如果您打算学习javascriptI，请阅读一条建议我尝试过！我想至少。我输入了：functionmover（obj）{obj.innerHTML=“谢谢”。style.text align:center}。它不工作，这是不正确的CSS或JavaScript。CSS进入HTML标记。您应该使用外部CSS缓存到内存中。您还应该使用功能检测而不是浏览器检测
//<![CDATA[
var yourDiv = E('whatever');
yourDiv.onmouseover = function(){
  this.innerHTML = 'It Worked';
}
yourDiv.onmouseout = function(){
  this.innerHTML = 'Mouse Over Me';
}
//]]>

$(document).ready(function(){ 

    var TargID = document.getElementById('bar')

       $(".foo").hover(function(){
          TargID.innerHTML="Thank You"
          $("div").css("background-color", "red");  
          $(".foo").css("text-align", "center"); 
       });

      $(".foo").mouseout(function(){
         TargID.innerHTML="Mouse Over Me"
         $("div").css("background-color", "#D94A38");  
         $(".foo").css("text-align", "left"); 

    });
});

<div class="foo" id="bar" style="background- color:#D94A38;width:220px;height:20px;padding:40px;">Mouse Over Me</div>